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.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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