Our Blog

How to Integrate Google Map API in Salesforce

How to Integrate Google Map API in Salesforce

Google Map API Integration with Salesforce :- This is explaining how to integrate Google Map API in your details page of any object such as Account, Contact, and Lead or in any custom objects, with the help of Visualforce page. Here we are going to give step by step instructions on how you can integrate Google Map API with your Salesforce. If you follow these simple steps, you can easily integrate Google maps in your details page of any object(Standard and Custom)


  • Shows the Address of any object such as Account, Contact, and Lead or in any custom objects in the map.
  • On click of the marker a info window is shown with the formatted address.
  • This makes it pretty easy to integrate the Google Map API and Google Map snippet on Salesforce standard objects layout and custom objects layout.

How to Integrate Google Map API in Salesforce

Step 1 :- Develop a visual force page with the code shared below

Step 2 :- In editor paste the following code :

<apex:page standardController="Account">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></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 ="{!Account.BillingStreet},{!Account.BillingPostalCode}{!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingState}<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

//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() {
google.maps.event.addListener(infowindow, 'closeclick', function() {
} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");

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";
#map {
font-family: Arial;
line-height:normal !important;
<div id="map"></div>

Step 3 :- Save Code.


Go to Account Layout and create Section for Google Map and add “Google Map” visual force page.


Just drag the “Google Map” visual force page as shown below in the snapshot.


Add the visual force page to the account layout in new section as shown below in the snapshot.


Save this layout


Open any record from Account and you can see your Google Maps on your Detail page



That’s all for How to Integrate Google Map API in Salesforce, still have any issue feel free to add a ticket and let us know your views to make the product better https://webkul.uvdesk.com/

Leave a Comment

Comments (1)

Please verify that you are not a robot.

Welcome back

Welcome back! Please enter your details

One or more fields have an error. Please check and try again.

Forgot Password?

Tell us about Your Company

How can we help you with your business?