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

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

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

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.

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