Lightning Web Components – Guest Users Can’t Open lightning-maps Footer in Google Maps Without Login

experience-cloudlightning-maplightning-web-components

I create a custom lightning web component and utilized the lighting maps element which quite simply is configured as…

          <lightning-map
            key={res.resId}
            map-markers={mapMarkers}
            zoom-level="16"
            class="open_in_google_maps"
            show-footer
          >

The button doesn't work for Public Guest Users. For some reason this button redirects the user to the communities login screen. How can I grant access to this button in a way that they are just redirected to google maps?

I have already added the trusted site to CSP trusted sites for https://*.forceusercontent.com but that seems to only help the authenticated users which this community doesn't really have any.

Best Answer

The lightning-maps component "open in google maps" button will not work for Public Guest Users. This is because the component is actually taking the user through the HelpAndTrainingDoor which will prompt authenticated users if they would like to proceed to the given URL.

The work around is to create your own button and link to google directly using HTML standard link and button elements. You can use the Lightning Design System classes to make it look like the other buttons fairly easily. See my code example below...

          <lightning-map
            key={res.resId}
            map-markers={mapMarkers}
            zoom-level="16"
          >
          </lightning-map>
          <a href={googleMapsLink} target="_blank">
            <button class="slds-button slds-button_brand">
              Open in Google Maps
            </button>
          </a>

Javascript to make google maps link....

  this.googleMapsLink =
      "https://www.google.com/maps/place/" +
      encodeURIComponent(
        `${this.Street} ${this.City}, ${this.State} ${this.Zip}`
      );
  })