Lightning Map in LWC

A lightning-map component shows a map of one or more locations using geocoding information and mapping imagery from Google Maps. We have to use the latitude and longitude values.


  • We can show multiple locations on the map at a time.
  • The map component has a description property to describe the location. This description property supports some limited HTML tags to mark up our description.
  • The supported tags are,

h2, h3, h4, h5,h6, i, ins, mark, p, small, strong, sub, and sup. Other HTML tags you pass to description are sanitized and removed.

sample code:



                    <lightning-map map-markers={mapMarkers} zoom-level=”10″ 




import { LightningElement } from ‘lwc’;

export default class LightningMap extends LightningElement {

            mapMarkers = [


            location: {

                Latitude: “-40.7831856”,

                Longitude: “-72.9675653”


            title: “Puerto Octay”,

            description: “Puerto Octay, Los Lagos, Chile”,



            location: {

                Latitude: “-40.975767”,

                Longitude: “-72.880717”


            title: “Muñoz Gamero 244”,

            description: “Muñoz Gamero 244, Puerto Octay, Los Lagos,  


            mapIcon: {

                path: “M 125,5 155,90 245,90 175,145 200,230 125,180

                       50,230 75,145 5,90 95,90 z”,

                fillColor: “purple”,

                fillOpacity: 1,

                strokeOpacity: 1,

                strokeColor: “black”,

                strokeWeight: 1,

                scale: 0.2,

                anchor: { x: 122.5, y: 115 }





Note: if you want to use the custom location icon then just remove value from the map

icon properties in the above code.