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

` `

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"?>

45.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ` **Step 4:- Create Lightning Application : lwcCreateMapApp.app** ` ` **[→ Get source code live demo link:-](https://www.w3web.net/display-google-map-markers-in-salesforce-lwc/)**