Salesforce: Implement Google Maps in Lightning Components

I don’t think I need to introduce Salesforce and Google Maps. If I do then maybe this blog is not for you. Visualforce has been in salesforce for a while and works amazingly well with Google Maps. But now we have lightning components. Do Google Maps work in lightning components?

The short answer is, no. This is because of locker service. Google Maps add multiple <script> tags when loaded. With locker service enabled, this is not possible due to security restrictions.  Currently you can disable locker service but eventually it will be mandatory. So, is there any other way Google Maps can work in lightning components?

YES, Google Maps work in Lightning components. To get Google Maps to work in lightning components we will need to implement maps in visualforce page and embed in lightning components as iFrame. One library that locker service team opened in locker service is window.postMessage. This allows lightning components to send/receive messages to/from visualforce pages. We could use this library and implement Google maps.

I am sure by now you’re all wanting to get into the code. Well, let’s get to it.

Use Case

We will go through Account list and show all the accounts on Google map based on BillingAddress.

Pre-requisites

Following are some of the pre-requisites to get this demo to work:

  • You need to get a free Google API key for using Google Maps
  • Google Maps work with longitudes and latitudes and not addresses. If we want to display accounts on maps then we will need to get long/lat for these accounts. For this, we need to enable “Data Integration Rules” for account.
    • This can update existing records (if you choose to) or automatically setup Long/Lat for new accounts.

Demo

 

Implementation

Now that we have setup the use case and have the data ready for this, let’s dive into code. More information about architecture and access to source code is available in github:

  • GoogleMap.cls:
    • This class returns list of all accounts which have BillingLatitude and BillingLongitude
    • Do note that using “!=” in a SOQL query can impact performance; we used it just for demo purposes
  • GoogleMap.page:
    • This page can send/receive messages to/from Lightning components
    • It receives a parameter “lcHost” which will be Lighting component URL to send messages to components on Lightning component URLs; required when using window.postMessage
    • Once page loads, visualforce will send a message to Lightning component that page was successfully loaded
      • Lightning component has no way to know when iFrame is loaded and when to send data for map
      • If we try to do it before iFrame is ready then we will get an error as we try to send data to non-existent page
    • Upon receiving Google map data, Google map library will be loaded and data will be used for drawing map
    • Note: We could have used <apex:map> but I wanted to display multiple accounts and also be able to control different settings for Google maps
  • GoogleMap.cmp:
    • This component will receive Google map options and data provided by calling component
      • This allows the component to be used from any component and not just Account because component just expects data in pre-defined format
    • Once visualforce page has been loaded (LC is notified by visualforce via an event), Lightning component will send data to visualforce page
  • DemoApp.app: Application:
    • DemoApp loads account information on init
    • That information is sent to GoogleMap component for Google Map on visualforce page

Architecture

This was tested in Spring’17 org and works fine even with Locker Service. On the outside, it all looks very complicated but once it has all been setup it looks very promising. window.postMessage library is very promising and offers opportunities for many use cases.

What are you waiting for? Go ahead and get it to work!!

13 thoughts to “Salesforce: Implement Google Maps in Lightning Components”

  1. Hi Ratan..

    Firstly thanks a lot the article. It gave a good idea on implementing google maps in salesforce lightning. I was hitting hard to find a way..So your article gave a starting point.
    I tried to develop what you did in my org. when i try to preview my vf page its failing with below error
    ‘Uncaught DOMException: Failed to execute ‘postMessage’ on ‘Window’: Invalid target origin ‘https://’ in a call to ‘postMessage’.’

    What I foudn in debugging is that its not able to get data for lexorigin.

    var lexOrigin = ‘https://{!$CurrentPage.parameters.lcHost}’;
    console.log(‘lexOrigin’ , lexOrigin);

    my log shows lexOrigin as https://
    and vfHOst as https://DOMAIN–CU1–c.cs74.visual.force.com/

    Please help me out in fixing the error

    Thanks in advance.

    1. Hi Swetha:

      Sorry for late reply, I was away for a while. It seems like you might not be sending “lexOrigin” param to visualforce page as part of URL parameters when you send it. I didn’t add many error checks in the code as it was mainly for demo.

      You can even try to remove any checks for “lexOrigin” and see how it works. The check is just for security as you can ensure your pages are not included from different locations and don’t send data there erroneously.

      Thanks

      1. getting the similar error
        Uncaught DataCloneError: Failed to execute ‘postMessage’ on ‘Window’: [object Object] could not be cloned.

        Any suggestion.

  2. Hi,
    Am getting this error:
    Uncaught DataCloneError: Failed to execute ‘postMessage’ on ‘Window’: [object Object] could not be cloned.

    Can someone please help.

    Thanks.

  3. Hi,

    I want to change mapTypeId to ‘satellite’. Where should I put it?

    My requirement is to get heat map. Can you please help me.

    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *