Adding Google maps v3 to your Visualforce page

The Google maps API is perhaps the most famous and well known APIs out there. There could always be scenarios requiring a Google map to embedded inside a VisualForce page. This could either be a stand alone page or an inline VF page in a detail page layout!

For example: In your Account detail page, you might want to plot all the contacts on a Google map based on their location.

A quick note about Google maps APIs. They have been around for quite some time now and google being the dynamic company that they are, have been updating the API quite a bit. So I wanted to put out a tutorial which refers v3. Google makes other awesome APIs as well and hopefully this blog will cover all of them eventually and explain how they can be used with Salesforce.

So lets move on to how we can accomplish this.

In the past you needed a developer API key to use the google map API but now you need it only for commercial applications. But in any case go and check out https://console.developers.google.com and login with your Google account. If you have not created a project, then go ahead and create one. You can see the different available Google APIs.

Googlemap-1

Even though a key is not mandatory, it would be a good idea to use it as you can do cool stuff such as monitoring the API usage.

Read more about it here.

In our example, let us build a simple VF page which will be used as an inline page in the Contact detail page layout.

First use this documentation as the reference in beginning to understand the Google map API.

So let us jump right into the code for our VF page.

This is a simple VF page consisting of mainly HTML and JavaScript code. On Line 57 we can see the <div> element which displays the map. It makes use of the standard Contact controller.

The Initialize() method is the heart of this code. Here we are first geocoding the contact’s address to obtain the latitude and longitude coordinates of the address so that we can pass them to the google map API.

If the Geocoding was successful, we pass the coordinates to the map API to initialize and display the map inside the div element. A marker is also added at that location.

When this VF page is used added to the Contact detail page, it will display the map based on the address for that record.

Googlemap-2

We can also pass an array of coordinates to the map API to display multiple locations on the map.

Please let me know if you have any questions or comments.

 

 

 

  • Sebastiano

    Hello, how about retrieving the map of a specific country knowing the ISO code of such country? For example, having a country salesforce object with FR code should return the map of France, with the boundaries of France in evidence. Thanks!

    • Decoding the cloud

      Hey Sebastiano thanks for the comment. For this I can think of a few ways.
      1. Perhaps there is an API which returns the name of the country if given a ISO code.
      2. The other approach is to build your own table in Salesforce. I think this approach is better as ISO codes are static for the most part. So perhaps create a Custom Metadata object storing ISO code to country mapping. So in your code, once you get the country pass that to the Google API for geocoding and you should the expected result.

      • Sebastiano

        Thank you!

    • Decoding the cloud

      An API for country codes.
      https://restcountries.eu/