Add Google Map To Any Custom Object In Salesforce

/ Platform Tools, Salesforce CRM

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:

  1. Go to the Google Maps Platform
  2. Click ‘Get Started’
  3. Check ‘Google Maps API”
  4. Click ‘Continue’
  5. Select ‘Create a new project’ and enter a project name.
  6. Click ‘Next’ to continue
  7. Click ‘Next’ to enable the APIs for the project
  8. 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:

  1. Go to Setup –> Visualforce pages –> New
  2. 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.