Display Maps in Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil December 10, 2021


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 :)
Tags:

Post a Comment

5 Comments

  1. Fernando.FDecember 12, 2021 at 8:42 AM

    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 !

    ReplyDelete
    Replies
    1. KapilDecember 12, 2021 at 9:05 PM

      Thanks, glad you like the post !

      For 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

      Delete
  2. UnknownFebruary 11, 2022 at 12:45 PM

    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?

    Thanks in advance

    ReplyDelete
  3. UnknownMarch 11, 2022 at 2:25 AM

    Great tutorial.. How can i use street view button on palace of satelite . ho can i do please help me?

    ReplyDelete
    Replies
    1. KapilMarch 13, 2022 at 8:34 AM

      Hi there, please check the official documentation for more details :
      https://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation

      Delete