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.

Features:

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

lightningMap.html

<template>

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

                         list-view=”visible”></lightning-map>

      </template>

lightningMap.js

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,  

                          Chile”,

            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.

Output: