Apex Code: Visualforce Google Maps Address mapping

Below is the code to display Google map of the Billing Address of an Account. Add the Visualforce page to your page layout.

Account: Chuck Norris ~ salesforce.com - Enterprise Edition

<apex:page standardController="Account">
<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() 
{
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.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";
var infowindow = new google.maps.InfoWindow({
 content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<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
 map.setCenter(results[0].geometry.location);
//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() {
 infowindow.open(map,marker);
 });
 google.maps.event.addListener(infowindow, 'closeclick', function() {
 map.setCenter(marker.getPosition()); 
 });
}
} else {
 $('#map').css({'height' : '15px'});
 $('#map').html("{!Account.Name}'s billing address could not be found, confirm 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>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: