a href link to google maps not working on Lightning community page

Question

I am designing a lightning community page using lWC. I have this code where the user will get directed to google maps when clicked. I can see the correct value being generated when I log the address to the console. Additionally, clicking the link in the console successfully navigates to Google Maps. What could be the reason for it not navigating on the lightning page?

Here is the HTML -

<div class="slds-p-around_x-small workorder-incident-location-title-style">
     <p>{selectedWorkOrderRecord.incidentLocation}</p>
     <a href="javascript:void(0);" data-value={selectedWorkOrderRecord.googleMapsUrl}
                                    onclick={viewOnGoogleMaps} target="_blank">View on Google Maps</a>
</div>

Here is the JS -

viewOnGoogleMaps(event) {
    const googleMapsUrl = event.currentTarget.dataset.value;
    this[NavigationMixin.Navigate]({
        type: "standard__webPage",
        attributes: {
            url: googleMapsUrl
        }
    });
}

Also the same thing happens when i add the show-footer attribute to lightning-map component.

Answer 1

Did you include the following in your LWC's JS file?

import { NavigationMixin } from 'lightning/navigation';

and

export default class CLASSNAME extends NavigationMixin(LightningElement){