Lightning-Map demo in Lightning Web Component (LWC)
currentLocationLWC.html
<template>
<lightning-card>
<lightning-layout>
<lightning-layout-item class="slds-p-left_small">
<lightning-icon icon-name="action:map"
size='small'
variant='success'
></lightning-icon>
</lightning-layout-item>
<lightning-layout-item>
<p class="slds-p-horizontal_small slds-m-top_small"
style="color: #87CEFA">
<b>
Mark your current location and destination on Map
</b>
</p>
</lightning-layout-item>
</lightning-layout>
<lightning-layout>
<lightning-layout-item size="4"
padding="around-small"
large-device-size="4">
<p style="font-size: 14px; color: #800000">
<b>Enter a destination</b>
</p>
<p>
<lightning-input value={street}
data-field="Street"
variant="label-hidden"
placeholder="Street/Locality"
></lightning-input>
<lightning-input value={city}
data-field="City"
variant="label-hidden"
placeholder="City"
></lightning-input>
<lightning-input value={pincode}
data-field="Pincode"
variant="label-hidden"
placeholder="Pincode"
></lightning-input>
<lightning-input value={state}
data-field="State"
variant="label-hidden"
placeholder="State"
></lightning-input>
<lightning-input value={country}
data-field="Country"
variant="label-hidden"
placeholder="Country"
></lightning-input>
</p><br/>
<lightning-button variant="brand"
onclick={markDestination}
label="Mark my Destination"
></lightning-button>
</lightning-layout-item>
<lightning-layout-item size="8"
padding="around-small"
large-device-size="8">
<lightning-map map-markers={lstMapMarkers}
zoom-level={zoomLevel}
></lightning-map>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
currentLocationLWC.js:
import { LightningElement } from 'lwc';
export default class CurrentLocationLWC extends LightningElement {
lstMapMarkers = [];
zoomLevel = 5;
street = '';
city = '';
pincode = '';
state = '';
country = '';
latitude = '';
longitude = '';
connectedCallback(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.lstMapMarkers = [{
location : {
Latitude : this.latitude,
Longitude : this.longitude
},
title : 'This is your current location'
}];
});
}
}
markDestination(){
this.street = this.template.querySelector("[data-field='Street']")
.value;
this.city = this.template.querySelector("[data-field='City']")
.value;
this.pincode = this.template.querySelector("[data-field='Pincode']")
.value;
this.state = this.template.querySelector("[data-field='State']")
.value;
this.country = this.template.querySelector("[data-field='Country']")
.value;
let destinationVar = {
Street: this.street,
City: this.city,
PostalCode: this.pincode,
State: this.state,
Country: this.country,
}
this.lstMapMarkers = [
{
location : {
Latitude : this.latitude,
Longitude : this.longitude
},
title : 'This is your current location'
},
{
location : {
Street: this.street,
City: this.city,
PostalCode: this.pincode,
State: this.state,
Country: this.country
},
title : 'This is your destination'
}];
}
}
