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!!