Home > Blog > Integration of Google Map with Salesforce

Integration of Google Map with Salesforce

Hi Folks, I am going to explain here step by step how can you show billing address of the account in Google Map on account detail page in Salesforce. Sounds difficult but It is quite easy. An easy way to do this by creating a visual force page which pulls the billing address from the account and displays this address on Google Map. Features:
  1. It shows the billing address of account on Google Map. However, you can show address related to any object like Contact or Lead etc.
  2. A small window is open when you click on red mark on Map, which shows full address with the account name.
How to Integrate Google Maps API in Salesforce: Development Part: Step 1: Create a visual force page with the following code:  <apex:page standardController=”Account”> <head> <script type=”text/javascript” src=”https://maps.google.com/maps/api/js?sensor=false”></script> <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> <script type=”text/javascript”> $(document).ready(function() { var myOptions={ zoom: 15,mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl: false }; var mapLocation; var marker; var geocoder = new google.maps.Geocoder(); var address =”{!Account.BillingStreet},{!Account.BillingPostalCode}{!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}”; var infowindow = new google.maps.InfoWindow({ content: “<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingState}<br>{!Account.BillingCountry}” });   geocoder.geocode( { address: address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK&&results.length) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {   //create mapLocation mapLocation = new google.maps.Map(document.getElementById(“mapLocation”), myOptions);   //center mapLocation mapLocation.setCenter(results[0].geometry.location);   //create marker marker = new google.maps.Marker({ position: results[0].geometry.location, map: mapLocation, title: “{!Account.Name}” });   //add listeners google.maps.event.addListener(marker, ‘click’, function() { infowindow.open(mapLocation,marker); }); google.maps.event.addListener(infowindow, ‘closeclick’, function() { mapLocation.setCenter(marker.getPosition()); }); } } else { $(‘#mapLocation’).css({‘height’ : ’15px’}); $(‘#mapLocation’).html(“Oops! {!Account.Name}’s billing address could not be found, please make sure the address is correct.”); resizeIframe(); } });   function resizeIframe() { var me = window.name; if (me) { var iframes = parent.document.getElementsByName(me); if (iframes&&iframes.length == 1) { height = document.body.offsetHeight; iframes[0].style.height = height + “px”; } } } }); </script> <style> #mapLocation { font-family: Arial; font-size:12px; line-height:normal !important; height:250px; background:transparent; } </style> </head> <body> <div id=”mapLocation”></div> </body> </apex:page> Step 2: Save Code. Configuration Part: Step 3: Add this visual force page on account detail page with the help of following step:
  1. Open page layout of account and create a new section for Google Map
2. Add your visual force page in this section. 3. Click on Save.   Now open any record of account and you can see the billing address location on Google Map on your detail page. You can also zoom the map by click on plus (+) sign. Enjoy your Google Maps Api Salesforce. References: http://code.google.com/apis/maps/documentation/webservices/  http://code.google.com/apis/maps/index.html
Enquire Now

lets get over a cup of coffee and discuss!

Page Name: