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!
If you liked this post, buy me a beer! 3EUR, securely via PayPal
[...] 7 comments so far.Update 18/03/2010: There’s a newer version of this code, see how to add Inline Google Maps using Visualforce.Many have asked me how to integrate Google Maps in a Salesforce.com page to pinpoint a specific [...]
Alessandro, molto bene grazie.
This is most excellent and works well without the hassle of an API key.
Just a reminder to all that you will get an empty map if you use multiple lines in your address.
Thanks again for my introduction to Visualforce (a newbie).
Bob
Great post!
It is just what I was looking for me!!
Thanks again.
Angelo
This is almost perfect, however it doesn’t work correctly in Safari due to cross domain issues. If there is no valid address, it leaves a huge white box displayed on the page. I’m not versed enough with the DOM and JavaScript to work around it.
This is superb! Work like a charm. Thank you very much for such a great solution.
Awesome. Is there a way to display multiple addresses. Billing as well and Shipping Address.?
I followed the instructions to the letter and copy/pasted the code into the Visualforce page, but when I go to an account page I get a javascript error :
Unterminated string constant
servlet.Integration Line:57
Code:0 Char:29
URI:https://c.ap1.visual.force.com/servlet/servlet.Integration?lid=06690000000Hi4G&ic=1
What am I missing/doing wrong?
Any help much appreciated
Found my own problem – it’s because of multiple lines in the address. Is there any way around this?
Great code..this was my first visualforce page. I get an SSL error due to the javascript files… any ideas? I thought about just loading them as docs on the salesforce system.
This was working fantastic until I imported all of my Accounts which use multiple lines in the addresses, has anyone found a way to make the google maps script work when an address has multiple lines in Accounts.BillingStreet ?
and now. how to make a multiple mark up google map? any help please.