Want to add a Google Map location to your custom objects in Salesforce? Want to have a visual location of your records? Want to be able to look at any record marked on a map like the one you see below?
Here are the steps to get that done!
Step 1: Remote Site Settings
First you need to add Google Map API to your Org. Go to Setup –> Remote Site Settings –> Add New
Type In the following:
Step 2: Generate your Google Maps API Key
Follow these steps to set up your API key:
- Go to the Google Maps Platform
- Click ‘Get Started’
- Check ‘Google Maps API”
- Click ‘Continue’
- Select ‘Create a new project’ and enter a project name.
- Click ‘Next’ to continue
- Click ‘Next’ to enable the APIs for the project
- Copy the generated API key from the popup, you’ll need this to set your key later.
Step 3: Create a Visualforce Page for your Custom Object
Follow these steps to create a visualforce page:
- Go to Setup –> Visualforce pages –> New
- Copy the following code:
[code language=”javascript”]
<apex:page standardController="CustomObject__C"> <head> <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=ADD_YOUR_GENERATED_GOOGLE_MAP_API_KEY_HERE></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 map; var marker; var geocoder = new google.maps.Geocoder(); var address ="{!CustomObject__C.Address__c},{!CustomObject__C.City__c}, {!CustomObject__C.State__c}, {!CustomObject__C.Zip_Code__c}"; var infowindow = new google.maps.InfoWindow({ content: "<b>{!CustomObject__C.Name}</b><br>{!CustomObject__C.Address__c}</br><br>{!CustomObject__C.City__c}</br><br>{CustomObject__C.State__c}</br><br>{!CustomObject__C.Zip_Code__c}</br>" }); 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: "{!CustomObject__C.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! {!CustomObject__C.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>
[/code]
Step 4: Add Key & Add Custom Object Name/Field
From here, simply enter your object name and fields. Lines 1, 13, 15, 32, 45 will all need to be changed for your custom object and fields.
Also, on line 4, Copy/Paste your Google Maps API Key.
Once this is done – Save. give it a name that will allow you to recognize it in your library of visualforce pages.
Step 5: Add to your Page Layout
Step 1: Go to your Custom Object in Object Manager
Step 2: Click Page Layout – And add the Visualforce page to your page layout. Click Save.
Step 6: Look at your Google Map on each of your Custom Object Records!
Contact Us at BerTech!
At BerTech, our mission is to provide comprehensive services to help your business utilize the capabilities of Salesforce CRM. Whether it’s a CRM tune up or app development, our goal is to create efficiency and improve the user experience. Please contact us for your free consultation call at (304) 542 -5100.
Adding google map to any custom object in SalesForce App Exchange is a very good feature. Thanks for this valuable information. Keep sharing !
Thank you Nikhil!
Did all that was mentioned above. I just get a blank screen instead of map.
Gopal – Would you mind sending me your code via email? I can look over it for you and see why it’s not working. You can send it to phil.berry@jde.xry.mybluehost.me
Thanks for the wonderful article
Thanks for the excellent manual
Thank you for the terrific article
This is really helpful, thanks.
Excellent guide. It would be AMAZING if you could do a follow up article on how to add google maps to a list of records for a custom object.