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

Improve this question
4
  • 1
    You can check my blog post santanuboral.blogspot.com/2019/07/google-map-using-lwc.html?m=1
    – Santanu Boral
    Jan 4, 2020 at 17:19
  • Did you find a solution for this? if yes can you please share?
    – Sandeep
    Feb 21, 2020 at 21:29
  • Not yet, I am planning to use LeafLet, I will update once I find the solution.
    – Ajay
    Feb 22, 2020 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, 2020 at 2:58

1 Answer 1

Reset to default
7

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
2
  • 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, 2020 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, 2020 at 13:55

Not the answer you're looking for? Browse other questions tagged .