A lightning:map example how to use google map on lightning web page and adjust/fix appearance of lightning-map in Salesforce Lightning Web Component LWC

[vijayk3327]

in this post we are going to learn about how to use google map on lightning web page and adjust/fix appearance of lightning-map in Salesforce Lightning Web Component LWC

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcCreateMap.html

`

Displays a map with markers in Lightning Web Component (LWC)

`

Step 2:- Create Lightning Web Component : lwcCreateMap.js

` import { LightningElement } from 'lwc';

export default class LwcCreateMap extends LightningElement {

mapMarkers = [
    {
        location: {
            Street: '1000 5th Ave',
            City: 'New York',
            State: 'NY',
        },

        title: 'Metropolitan Museum of Art',
        description:
            'A grand setting for one of the greatest collections of art, from ancient to contemporary.',
    },
    {
        location: {
            Street: '11 W 53rd St',
            City: 'New York',
            State: 'NY',
        },

        title: 'Museum of Modern Art (MoMA)',
        description: 'Thought-provoking modern and contemporary art.',
    },
    {
        location: {
            Street: '1071 5th Ave',
            City: 'New York',
            State: 'NY',
        },

        title: 'Guggenheim Museum',
        description:
            'World-renowned collection of modern and contemporary art.',
    },
];

markersTitle = 'Coordinates for Centering';

center = {
    location: { Latitude: '40.7831856', Longitude: '-73.9675653' },
};

} `

Step 3:- Create Lightning Web Component : lwcCreateMap.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Application : lwcCreateMapApp.app
<aura:application extends="force:slds"> <c:lwcCreateMap/> </aura:application>

→ Get source code live demo link:-