I am trying to implement a Lightning component/VF page that could render a shape/layer on a Map(may be a Google Map) after successfully capturing the plotting.

Initially the end user submits a record that contains Geolocation (longitude and latitude) field. When he opens the created record, I would like to show a map(on a record detail section) which maps that coordinate on a map. Then I want the user to plot an area around the coordinates to extract the area that owns by the user. After he clicks on Save, I would like to store all the plotted coordinates and save it as a shape(or however feasible).

From here-on, whenever the user opens the record, the map should render the above extracted shape on the map section.

I am not sure how I can achieve this feature. If any ideas on what/how to use Salesforce's out-of-box functionalities and other integrations, that would be much appreciated.

My findings:

  1. https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_field_service_package_polygons.htm (this could be FSL, which I am not intended to do, but looking for something similar)
  2. https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
  3. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_maps_example.htm

NOTE: I am not asking for someone to build or provide me with any code source. I am looking for ideas and thoughts around this implementation.


1 Answer 1


I don't think this can natively be done in Salesforce lightning , but I can come up with an idea to achieve it.

lightning:container introduced few release back can help you use apps that minipulate dom directly like Google Maps API, Angular , JS etc without having to worry about Locker services.

Upload an app developed with a third-party framework as a static resource, and host the content in a Lightning component using lightning:container. Use lightning:container to use third-party frameworks like AngularJS or React within your Lightning pages.

You can pass messages and attributes from Lightninng component to the container using the messaging framework

 <lightning:container aura:id="ReactApp"
                             src="{!$Resource.SendReceiveMessages + '/index.html'}"

Send Messaging JS:

    sendMessage : function(component, event, helper) {

        var msg = {
            name: "General",
            value: component.get("v.messageToSend")

    handleMessage: function(component, message, helper) {
        var payload = message.getParams().payload;
        var name = payload.name;
        if (name === "General") {
            var value = payload.value;
            component.set("v.messageReceived", value);
        else if (name === "Foo") {
            // A different response

    handleError: function(component, error, helper) {
        var e = error;

I dont know how Google Maps API work but after plotting you can sent a message to the container listner which can be listened by your component and submit to apex/database if needed.

Src : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_overview.htm

You must log in to answer this question.

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