5

As we know that standard base component lightning-map has limited customizations, so I am planning to use a custom map using Google Maps API.

I know that we can import the JS file and use it as static resources, however, in this case, Google API is a dynamic URL "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap". How do we import this into LWC and use it?

I am trying to achieve something similar to this.

enter image description here

  • 1
  • Did you find a solution for this? if yes can you please share? – Sandeep Feb 21 at 21:29
  • Not yet, I am planning to use LeafLet, I will update once I find the solution. – Ajay Feb 22 at 23:19
  • @Ajay I'm also trying to display a google map with routing info in a custom LWC. I can't get it to work and the out of box lighting-map component does not offer the extra's I need. Are you having any luck using Leaflet? – Christian Anderson Jun 17 at 2:58
6

Unfortunately, Lightning Web Components require that an external library like this one be uploaded to Salesforce as a static resource. The Content Security Policies in place demands it for security purposes. This is likely why Salesforce collaborated with Google on the lightning map components that exist currently. That being said, there are some free, open-source map libraries out there that can get what you want (e.g. Leaflet, OpenLayers, Modest Maps) or you can embed a Visualforce page and use Google Maps with your custom code.

| improve this answer | |
  • 1
    And on that page it states: "You can’t load JavaScript resources from a third-party site, even if it’s a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal." – nbrown Oct 1 at 19:22
  • You're right! Got confused with how they worded things. [deleted previous comment to eliminate any confusion if someone else lands on this question] – fdc Oct 3 at 13:55

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