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


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

Post a Comment

2 Comments

  1. 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. 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