Apex Code: Visualforce Google Maps Customer Mapping

Create a Visualforce page to show all your customers addresses on Google Maps. Note there is a limit on the amount of Map pins that are set thus I created a timeout of a few seconds so Google does not show me pop-up an error message.

<apex:page controller="getCustomerAddress" sidebar="false" showChat="true">
<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"> 
 var arraddress= new Array();
 var arrids= new Array();
 var content=new Array();
 var arrnames= new Array();
 var i=0;
 var map;
 var geocoder;

function initialize() 
 var mapDiv = document.getElementById('map-canvas');
 map = new google.maps.Map(mapDiv, 
 zoom: 4,
 mapTypeId: google.maps.MapTypeId.ROADMAP 
 google.maps.event.addListenerOnce(map, 'idle', addMarkers);
 function addMarkers() 
 for (var i = 0; i < arraddress.length; i++) 
 content[i] = arrnames[i]+' '+arraddress[i];
 function geocodeAddress(addds,id,content)
 geocoder = new google.maps.Geocoder();
 geocoder.geocode( { 'address': addds}, function(results, status) 
 if (status == google.maps.GeocoderStatus.OK) 
 var marker = new google.maps.Marker({map: map,position: results[0].geometry.location});
 var infowindow = new google.maps.InfoWindow({content: content});
google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map,this);});
 google.maps.event.addListener(marker, 'mouseout', function() {infowindow.close();});
 google.maps.event.addListener(marker, 'click', function() { window.open('/'+id);});
 else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) 
 setTimeout(function() {geocodeAddress(addds, id, content);}, 200);
 alert("Geocode was not successful for the following reason: " + status);
 google.maps.event.addDomListener(window, 'load', initialize);
 <body style="font-family: Arial; border: 0 none;">
 <div id="map-canvas" style="width: 1500; height: 750px"></div>
 <apex:repeat value="{!Address}" var="a">
 arraddress[i]= '{!a.BillingStreet}, {!a.BillingCity}, {!a.BillingPostalCode}, {!a.BillingCountry}';

One Comment on “Apex Code: Visualforce Google Maps Customer Mapping

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: