2

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?

2

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.

| improve this answer | |
0

Can you try loading the style sheet in connectedCallback.

connectedCallback() {
    Promise.all([
        loadStyle(this, mapCssFixes)
      ]).then(() => {
        console.log(' css loaded');  
    }).catch(error => {
        console.log('error received in handling css'+error);
    });
}
| improve this answer | |
-1

Smaller map markers

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

| improve this answer | |

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.