How to add Google Map in Salesforce (featuring Google Map V3) Revised Post

Watching data on map with Geo-location is always fascinating, I had written a blog post here  couple of year back, about adding Google Maps in Visualforce and adding them accounts layout, many of you might have already implemented or might have seen implementation on account layout, this article is written for people who are requesting me to update old code matching new API standard and features, at the same time a  revision to old blog post.

Lately in one of the project, I recently was working with Geo-location API intensively and  I learned that there are cool changes on Google Map API V3. I have updated the code to meet new standard for V3 static map api and sharing code snippets on varied instances and features of Google Maps

How to get coordinates from address using Google Geo-code Services  ?

Google Map API needs geolocation coordinates,  using Geocode service from google, you can get coordinates for a location address.

How will your account address look like ? 

Your address would be combination of couple of standard fields shown below, which can generate complete address

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

  
Binding Address to convert to Geo-location ?       

In the JavaScript call back method, simply pass on the address of Account to get back latitude and longitude

       

Once you know the latitude, you can pass on values to initiate the Map. To check full code, scroll down in bottom for complete source code hosted on Github repository.

You can do couple of cool effects on top of map as well using simple tweaks.

Adding Marker Drop Effect
 

 
Adding Bounce Effect to Toggle Bounce 

 
Adding Circle Effect : 

Get the List of accounts which are in Texas, California and New York and then create a method in Javascript to draw circle based on count

Controller behind simply bring count of accounts state wise

Plugging properties to inject value to draw radius of circles

Adding RoadMap and 45 degree Tilt : 

Source Code

The Source Code is available in this Git-hub repository

Read more :

Show Salesforce Data on Google Maps using Salesforce Reports by my colleague Arun
Avinava Maiti BlogForce9 Google Map Component
Youtube for Amazing Implementation and Ideas