In this blog I will share the build to display Google Map in your Lightning Web Component.
Please check the code below :
HTML
1 2 3 4 5 6 7 8 9 | <template>
<lightning-map
map-markers={mapMarkers}
zoom-level={zoomLevel}
list-view={listView}
show-footer
>
</lightning-map>
</template>
|
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import { LightningElement } from "lwc";
export default class Map extends LightningElement {
mapMarkers;
zoomLevel;
listView;
connectedCallback() {
this.mapMarkers = [
{
location: {
City: "Ajmer",
Country: "India",
PostalCode: "305001",
State: "RJ",
Street: "Ajay Nagar"
},
title: "Salesforce Bolt",
description: "I am here",
icon: "standard:account"
},
{
location: {
City: "Ajmer",
Country: "India",
PostalCode: "305001",
State: "RJ",
Street: "Vaishali Nagar"
},
title: "Test Location",
description: "Success !",
icon: "standard:account"
}
];
//Google Maps API supports zoom levels from 1 to 22 in desktop browsers, and from 1 to 20 on mobile.
this.zoomLevel = 10;
this.listView = "visible";
}
}
|
Output
Checkout complete video tutorial below
If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !
Thanks
Happy Coding :)
.png)
%20(1).png)
%20(1).png)
5 Comments
Don't we need the api-key / api-secret of google?. Not sure exactly which is the difference between this and when we use the api of google to show the map. The post was great !
ReplyDeleteThanks, glad you like the post !
DeleteFor this lightning-map we don't need the APIs as it loads content from the Salesforce domain maps.a.forceusercontent.com in an iframe.
But there are some limitations as well, please check complete article below
https://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation
Great tutorial....How do we get the account name in the listview (assuming we have multiple markers) to link/redirect to the account detail page of the account clicked?
ReplyDeleteThanks in advance
Great tutorial.. How can i use street view button on palace of satelite . ho can i do please help me?
ReplyDeleteHi there, please check the official documentation for more details :
Deletehttps://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation