18 Mar 2010 12 comments so far
Inline Google Maps using Visualforce
Sometime ago we’ve seen how to integrate Google Maps in a Salesforce.com page to pinpoint a specific address on the map, more precisely, how to add an inline map to pinpoint an Account Billing Address. I revisited the script I wrote more than a year ago and produced it as a Visualforce page, here’s the result.
The finished product
Here’s a screenshot of what we are going to get:
Improvements
- I’m now using Google Maps API v3, which makes the map faster to load and doesn’t require an API key anymore.
- I removed the search term {!Account.BillingState}, so the script should now correctly map any address, not only US ones.
- It degrades nicely if the Account Billing Address isn’t found, as shown below:
Setup
Follow the 3 steps below:
- In Salesforce.com, navigate to Setup > Customize > Develop > Pages and create a new Visualforce Page with the following code:
<apex:page standardController="Account"> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://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 map; var marker; var geocoder = new google.maps.Geocoder(); var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}"; var infowindow = new google.maps.InfoWindow({ content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<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 map map = new google.maps.Map(document.getElementById("map"), myOptions); //center map map.setCenter(results[0].geometry.location); //create marker marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title: "{!Account.Name}" }); //add listeners google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.addListener(infowindow, 'closeclick', function() { map.setCenter(marker.getPosition()); }); } } else { $('#map').css({'height' : '15px'}); $('#map').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> #map { font-family: Arial; font-size:12px; line-height:normal !important; height:250px; background:transparent; } </style> </head> <body> <div id="map"></div> </body> </apex:page> - Add the Visualforce page on the Account page layout (in a single-column section) and set it’s height to be 250px.
- All done!
Navigate to one of your Account records and verify the map is displaying correctly!
Let me know if you have any questions/comments!