Integrating Google Maps (GMaps) with Salesforce (Accounts / Leads)

As an Consultant I always prefer to have a perfect UI and a value addition to my clients. Use the VF to add a live, interactive Google Maps with zoom controls. (Copy paste the below mentioned code and paste it in your VF Page).

How to create a VF page –
Step – 1 Click Setup
Step – 2 Under Develop Click on pages
Step – 3 Name the Page GoogleMapsAccounts.
Step – 4 Paste the below code and save it. (Quick Save and Save)

How to Use the GoogleMapsAccount visual force page on Account Object – 
Step – 1 Select the page layout where you to use the vf page.
Step – 2 Create the new section with the name Google Maps on Page Layouts.
Step – 3 Drag the visual force page layout “GoogleMapsAccounts” to the new section (see the step – 3)
Step – 4 Save the page layout and you’re good to Go.

Please see the screenshot –

Google MapVisual Force Page Code –

<apex:page standardController="Account">

<script type="text/javascript" src="https://maps.google.com/maps/api/js?
sensor=false"></script>

<script type="text/javascript">
function initialize() {
var map;
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
var mapMarker;
var geocoder = new google.maps.Geocoder();

var address = "{!SUBSTITUTE(JSENCODE(Account.BillingStreet),'\r\n',' ')}, " + 
"{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " 
+ "{!Account.BillingCountry}";

geocoder.geocode( {address: address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK && results.length)
{
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
map.setCenter(results[0].geometry.location);
mapMarker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Account.Name} " + address
});
}
} else

document.getElementById("map").innerHTML = "Unable to find or display a map for
{!Account.Name}'s billing address : " + address;});

}
</script>
<div id="map" style="width:100%;height:350px"></div>
<script>
initialize();
</script>
</apex:page>
Advertisements

About smattey

Sumit Mattey is the Leader, Cloud Technologist & Evangelist, Husband, Father and Fun Loving person. Currently working as - PROJECT MANAGER, R Systems Int'l Ltd.(Salesforce) Not simply defined by his career, Sumit lives with his family (whom he loves so much). He is an avid movie buff, a big book worm, a lover of food and beverage. While his schedule has not been forgiving as he'd like, he also enjoys doing photography with great outdoors and tries to hunt as often as possible.
This entry was posted in Cloud Computing, Data Management, Gmail Integration, Integration, Salesforce.com and tagged , , , , , , . Bookmark the permalink.

3 Responses to Integrating Google Maps (GMaps) with Salesforce (Accounts / Leads)

  1. After loading Record Detail Page of Account I am not getting the GMAP of the corresponding Account Location.

  2. Please help me regarding the GMAP on Account Record.

  3. smattey says:

    Let me know what you want to know. You can drop me an email at sumit@matteys.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s