Jan 15, 2012

Integrating Google Maps in Salesforce

Requirement is to show the location of my Account on Google Maps. It looks difficult but actually it is very simple to implement.

Just create a new visualforce page with this code
<apex:page standardController="Account">

<script src="http://maps.google.com/maps?file=api">

<script type="text/javascript">

var map = null;
var geocoder = null;

var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";

function initialize() {
  map = new GMap2(document.getElementById("MyMap"));
  map.addControl(new GMapTypeControl());
  map.addControl(new GLargeMapControl3D());
  geocoder = new GClientGeocoder();
    function(point) {
      if (!point) {
        document.getElementById("MyMap").innerHTML = address + " not found";
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        marker.bindInfoWindowHtml("Account Name : <b><i> {!Account.Name} </i></b> <br/> Address : "+address);

<div id="MyMap" style="width:100%;height:300px"></div>
    initialize() ;

As you can see that I have used standard controller so you need to pass the account Id in URL. Let's say if the page name is "GoogleMaps" then the URL will look something like this : ".../apex/GoogleMaps?id=YOUR_ACCOUNT_ID".

When you click on the balloon it will show you the Account name and the address, you can change it according to your need by changing the code of line "marker.bindInfoWindowHtml"

Use this page as in line visualforce page on native layout and enjoy the Google maps with Salesforce.



  1. Nice writeup as usual Forceguru. It really shows how simple it is to integrate Google Maps and Force.com, it really is that easy!

    I've done this lots of times myself, and I'd say that the natural next steps clients like to see if how to filter a list of Accounts by location. Checkout Find Nearby on the AppExchange or my sourcecode from Dreamforce on github(https://github.com/corycowgill/sfbusradar) to see how to query for records in Salesforce by location.

  2. I try above but it is not working.Do i have to change any user settings

  3. You may want to consider using v3 of the Google Maps API rather than v2 since it was deprecated May 19, 2010. Google's deprecation period is 3 years, so this code may not work as expected past May 2013.

  4. This issue with using v3 of the API as I recall is that the v3 API limits based on IP address for calls like Geocoding, not Google Maps API Key. Since Salesforce runs on Multitenant architecture, v3 limits are shared across Salesforce not individual clients (keys). At least that's what I remember.

  5. Error: testpage line 1, column 1: Content is not allowed in prolog
    Error: Content is not allowed in prolog.

    I am getting the following error when trying to save the code.

  6. If you use the Google Maps API server-side, then the IP address limitation would likely be reached very quickly. Since it is recommended using client-side code (javascript) then there should not be a problem reaching limits as each user visiting the page will have their own quota limit. If you need to do batch geocoding, then it can be a problem.


    I have recently developed a store locator using v3 of the API and it has been working without issue for the past few weeks with as many as 800 requests each day and an average of 500 per day.

    To avoid reaching geocoding limits, it was required to have the latitude and longitude populated and any other geocoding is done using the Javascript API.

  7. Thanks for the great example! I came across one minor issue when I tried to use the sample code. As it is written maps weren't displaying at all. However, when I updated:

    marker.bindInfoWindowHtml("Account Name : {!Account.Name}
    Address : "+address);



    everything worked perfectly.

    Wanted to share that change in case anyone else was having similar issues.

    Thanks again!

    - Dan

    1. Thanks Dan, There seems to be some problem with the code above. But your fix did the magic.

    2. Hi Dan,

      I have changed the code! But I can't see the map,
      in fact it does not works! Some recommendation?

      Help! :(

      Regards, @lonso.

    3. Hi Dan,
      For me also it is not working i am not able to get any map in my VF page.
      Please help me with some code....


  8. I want to save the latitudes and longitudes in the account object and if possible re-use the stored values to display the location in a map.

    I was trying something like this by using the sample code above after the map has been displayed.
    However, it appears that when i try to use AJAX call,the map itself is not displayed even though i add the src attribute to my script tag.
    'type="text/javascript" src="/soap/ajax/23.0/connection.js"'

    The update of account is as follows:-

    acc = new sforce.SObject("Account");
    acc.Id = "{!Account.Id}";
    acc.lat__c = results[0].geometry.location.lat();
    acc.lon__c = results[0].geometry.location.lng();

    sforce.connection.update([acc], {
    onSuccess: function(result) {
    onFailure: function(error) {
    timeout: 5000

    Any help would be much appreciated.

    1. Hi Siim!!!

      I wanna do the same. Can you resolve your problem??
      I have a custom object, and now I get latitude and longitude, I use the
      code above, but I don't see that works, I don't see the map

      Do you have any tip?


  9. sir i used above code but the code is not working properly.
    means the google map is not connecting with salesforce..

  10. Hi ankit,

    How can We show different colored markers based on Country value of an account?
    Suppose if the country is "India" then I would like to show "green colored marker" and if the country is "US" then I would like to show "Red colored marker".

  11. I had to make the change recommended by Dan to get the code working as well.

    Has anyone found a workaround for street fields that have multiple lines?

  12. Does anyone know how to modify the code to work off of stored latitude longitude values instead of and address?

    1. Hi William!

      I am trying to do that! But no results by now! :(
      I am using the code above, but I can not see the map.

      Do you have any tip?


    2. William, I used the following in place of the billing address.

      {!SUBSTITUTE(JSENCODE(Account.BillingStreet),'\r\n',' ')}

    3. Thanks Richard.
      Your soln worked.

      Replace this part ::
      var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode}, {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";
      with this...
      "{!SUBSTITUTE(JSENCODE(Account.BillingStreet),'\r\n',' ')}";

  13. Hi ,

    Iam able to show account location,

    But I have another requirement of how to show all account info in visualforce page,
    Please let me know of how to do it>//???

    1. Arun Can share your code which worked for you..

  14. This comment has been removed by the author.

  15. This comment has been removed by the author.

  16. Change this part:

    var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode}, {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";

    now it will work....

  17. Hi, I am trying the code suggested by Ankit but i am not getting the map in my vf page.
    Can any body tell me where should i modify the code to get the map.


  18. Sorry if my question is wrong, I'm quite new in visualforce coding.

    How can I put an array of accounts on a map?

    I used the following code to get the list of addresses of the accounts. but I don't know how to pass it to the script that creates the map:

    {!c.BillingStreet}, {!c.BillingPostalCode} {!c.BillingCity}, {!c.BillingState}, {!c.BillingCountry}

    1. seems that the code doesn't appear

      apex:pageBlock title="Viewing Accounts">
      apex:form id="theForm">
      apex:panelGrid columns="2">
      apex:outputLabel value="View:"/>
      apex:selectList value="{!filterId}" size="1">
      apex:actionSupport event="onchange" rerender="list"/>
      apex:selectOptions value="{!listviewoptions}"/>
      apex:dataList var="c" value="{!accounts}" id="list">
      {!c.BillingStreet}, {!c.BillingPostalCode} {!c.BillingCity}, {!c.BillingState}, {!c.BillingCountry}

  19. i was geting blank page.what changes should i do plz tell me

  20. Getting a blank page,can't see any map.Can any one help ???

    1. use https in Script tag . it should work!

  21. I am also getting a blank page.Do i have to change any setting?

    1. If you are using Chrome as your browser, then you will have to allow the "insecure" content to load by clicking on the shield to the right of the URL bar.

      Or, you can change any http:// to https://

      For example:

  22. This comment has been removed by the author.

  23. I am getting the Authorization error on same code.
    Please let me know if I have to make any initial settings.
    I have added the page to sites VF page list and also edit the public access settings please Help.

  24. I'm trying to display accounts in google maps with the latitude and longitude reference but keep getting a message that tells me the website needs a different Google Maps API Key. Anyone knows what it means and what has to be done? Thanks!!

  25. When i am used the above code in a Visual force page i am getting an error,
    "This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key."