Written: 23 Apr 2008 @14:54 - Last Modified:
23 Apr 2008 @14:54
Inline Google Maps
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.
Advertisement
5 Comments, Comment or Ping
Awesome! Thanks for this. I am having one issue though. For me, I’m using Account.ShippingStreet instead of mailing but I assume that this problem is for both. If there are multiple lines in the street address field then the map does not show. Is there a way around this? I tried messing with functions to see if I could chop out the “\n” but it didn’t work. I only really need line one as I don’t want to capture suites, floors, etc. Any help is appreciated.
I have used your code but for the life of me I am not able to get the maptype buttons to appear when the map displays. I would like the ability to be able to jump from Map to Hybrid, etc.
Great s-cntrol. Worked a treat. Do you have any plans to create an s-control which will be able to aggregate multiple custom objects below a parent custom object
ie
“Rock concert tour” has a number of “gigs” and a number of “publicity events”. Having these all displayed on a map on the “rock concert tour” page would be brilliant
Great help. I was triing to find something similar for some time now. The problem is that it doesn’t seems to work with most of the addresses formats outside the US.
I’m trying to use your map. It looks great, but it’s not working in salesforce.com for me. I get an error with the account name, and address with 3 ” ,,, not found”
Reply to “Inline Google Maps”