23 Apr 2008 7 comments so far
Inline Google Maps
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 address on the map. The example we’re going to see today is how to add an inline map to pinpoint an Account billing address.
The finished product
Here’s a screenshot of what we are going to get:
Let’s get started
Right so, let’s see what we need:
- First off you need a Google Map API Key you can obtain for free from here; it’s necessary to embed Google Maps in your own web pages. When requested to insert your website URL, enter the name of the instance you’re on, complete with https:// (e.g.: https://emea.salesforce.com/ )
- Then, within Salesforce.com, navigate to Setup > Customize > Develop > S-Controls > New S-Control; specify a Label (e.g.: “Inline GMaps”), set the Type to be HTML, in the HTML Body section paste the following code (don’t forget to substitute YOUR-GOOGLE-MAPS-API-KEY-HERE with the Google Maps API Key you created in step #1), then Save.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script src="http://maps.google.com/maps?file=api&v=2.x&key=YOUR-GOOGLE-MAPS-API-KEY-HERE" type="text/javascript"></script> <script type="text/javascript"> var map = null; var geocoder = null; var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}"; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallMapControl()); geocoder = new GClientGeocoder(); geocoder.getLatLng( address, function(point) { if (!point) { document.getElementById("map_canvas").innerHTML = address + " not found"; } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.bindInfoWindowHtml("{!Account.Name}"); } } ); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width:100%;height:300px"></div> </body> </html> - Next, navigate to Setup > Customize > Accounts > Page Layouts and click on Edit next to the correct page layout (you might only have one). Click on Create New Section with Name “Google Maps”, “Single” Columns, leave the two checkboxes checked and click Ok.
Now, on the right hand side of the screen, from the View dropdown list, select Custom S-Controls; you’ll see the newly created S-Control (e.g.: “Inline GMaps”) and all you need to do is to drag and drop that component into the newly created section.
Lastly, double-click on the S-Control component now in the section: a popup window will appear. Make sure the Width (in pixels or %) is 100%, set the Height (in pixels) to 300 and untick both the underneath checkboxes. - All done!
Navigate to one of your Account records and verify the map is displaying correctly!
I’m not going to analyse the S-Control line by line, with a little knowledge of HTML and JavaScript you should be able to modify it to suit your needs, but please let me know if you have any issues.