LWC – Adjusting and Fixing Appearance of Lightning-Map Component

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?

Best Answer

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
    };

<template>
  <lightning-map
    map-markers={mapMarkers}
    options={mapOptions}
    >
   </lightning-map>
 </template>

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,
        }
   }
];
Related Topic