whateveryourscriptis

How To Integrate Google Maps Into Your Salesforce Software

By admin November 25, 2013
Blog, Salesforce Development 2

This is one of the most frequently asked questions when it comes to Salesforce development & customization. “How to integrate Salesforce with Google Maps? “What if you want to show the address in Google Maps of  “Leads” in the leads detail page?

Here we are going to give step by step instructions on how you can integrate Google Maps with your Salesforce software. If you follow these simple steps, you can easily integrate Google maps in your details page of any object such as Account, Contact, and Lead or in any custom objects. We will be constantly sharing solutions to questions that we receive people from people regarding Salesforce development. All of these solutions are provided by our in house expert Salesforce developers.

Follow these simple steps:

Step 1 –
Go to setup → Develop → Pages
Click “New” button for creating new pages

Step 2 –

In Label, name box type “Google Map Integration”

Step 3 – In editor paste the following code:

<apex:pagestandardController=”lead”>
<head>
<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() {
varmyOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
  }
var map;
var marker;
 
vargeocoder = new google.maps.Geocoder();
var address = “{!lead.Address__c}, “+”{!lead.Street}, ” + “{!lead.City}, ” + “{!lead.PostalCode}, ” + “{!lead.Country}”;
 
varinfowindow = new google.maps.InfoWindow({
    content: “<b>{!lead.Name}</b><br>{!lead.Street}<br>{!lead.City}, {!lead.PostalCode}<br>{!lead.Country}”
  });
 
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: “{!lead.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! {!lead.Name}’s billing address could not be found, please make sure the address is correct.”);
resizeIframe();
    }
  });
 
functionresizeIframe() {
var me = window.name;
if (me) {
variframes = 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>

 

“Save” this code

Step 4 –

Open Setup → Customize → Leads → Page Layouts

Click on “Edit” button:

 

Step 5 –

Click on “Visual force Pages”

 

Step 6 –

Drag “Google Map Integration” Visual force page from “Lead Layouts” and drop it anywhere according to your requirements

 

Save this Layout

Step 7 –

Open any record from leads and you can see your Google Maps on your Detail page
Step 8 – Smile!
We hope this step by step walk through of how to integrate Google Maps into your Salesforce software was helpful to you. We will every week post different things that are helpful to Salesforce users, developers, & administrators. Any comments, questions, or requests you have regarding Salesforce development, please feel free to share them and we will get back to you. May the force be with you!

Related Posts