It is easy to create a Google Map control with the standard Salesforce Lightning Web Components map control, but how can you set the Google Maps control options that allow you to make configuration changes to the functionality and look&feel of the map?

Specifically I want to remove the 'Satellite' view button present on the control provided by Salesforce, but there are also quite a few things I'd like to try out such as controlling layers.


The lightning-map documentation includes this example HTML:

    <div class="slds-m-around_medium">
        <h1 class="slds-text-heading_small">Complex Example</h1>
        <p class="slds-text-body_regular">
        All available attributes on map are used here.
        Apart from markers the center and zoom level are set manually.
        Also the footer is explicitly shown.
    <!-- the map component -->
        map-markers = {mapMarkers}
        center = {center}
        zoom-level = {zoomLevel}
        markers-title = {markersTitle}
        show-footer = {showFooter}>

So at present, you cannot set the options you want to, though as since this is a beta component, additional attributes - that get passed through to the underlying Google Map API - may be added before the component is GA.

If this is very important, an alternative is to write your own LWC that wraps Google Maps so you can expose those options.

| improve this answer | |
  • 1
    I spent some more time trying to get around this by finding the original Google Maps element through Javascript, but it does appear completely hidden by a Salesforce provided service instead. Therefore you are correct that I would have to 'roll my own' Google Maps control to solve this one. – Andrew May 26 '19 at 1:33

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