In my Lightning Web Component, I am using the <lightning-map> Base Component to display a Google map.

I have a few display issues and things I would like to adjust, but It doesn’t work as expected.

enter image description here

  1. Hide remove all button elements (Street View, +-, Modes)
  2. Smaller map markers

I tried a global CSS from a static resource:

/* Hide button */
.gm-svpc, .gmnoprint {
    display: none !important;

loaded like this but it has no effect

import { LightningElement, api, track } from "lwc";

import { loadStyle } from 'lightning/platformResourceLoader';
import mapCssFixes from '@salesforce/resourceUrl/mapCssFixes'

export default class XYZ extends LightningElement {

    // Note: Load custom style to fix map issues(Workaround by Don Robbins)
    renderedCallback() {
        loadStyle(this, mapCssFixes)
            .then(response => {
                    console.log('custom styles loaded');

I guess that is because of Shadow-DOM and iframe.

Any workarounds, tricks I could try until Salesforce improves this component?


This is finally getting improved in Spring 21 release.

You can remove the not needed buttons with the new property mapOptions

mapOptions = {
      'disableDefaultUI': true // when true disables Map|Satellite, +|- zoom buttons
      'draggable': false, // when false prevents panning by dragging on the map


Also, the icons can use an SVG icon other than the standard icon using mapIcon

mapMarkers = [
        location: {
            City: 'San Francisco',
            Country: 'USA',
            PostalCode: '94105',
            State: 'CA',
            Street: '425 Mission St', 
        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: '#CF3476',
            fillOpacity: .5,
            strokeWeight: 1,
            scale: .10,

Unfortunately, there's nothing you can do from a Stylesheet perspective because the map is embedded in an iframe. Style defined in a parent window can't affect a child document in an iframe. That holds true since the beginning of HTML, it's not LWC related.

If you'd like to cutomize a map component, you'll have to create your own. If you want to do down that path, I would recommend Leaflet. It works great, it's easier to setup than Google Maps and it's quite powerful. We used it for several demos but nothing I can share unfortunately.

However, it turns out that someone just shared a Leaflet LWC sample. I haven't tested but it looks promising.


Can you try loading the style sheet in connectedCallback.

connectedCallback() {
        loadStyle(this, mapCssFixes)
      ]).then(() => {
        console.log(' css loaded');  
    }).catch(error => {
        console.log('error received in handling css'+error);

Smaller map markers

From the documentation: "Custom marker icons are currently not supported" https://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.