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">
<html>
<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"> 
 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];
 geocodeAddress(arraddress[i],arrids[i],content[i]);
 }
 }
 
 function geocodeAddress(addds,id,content)
 {
 geocoder = new google.maps.Geocoder();
 
 geocoder.geocode( { 'address': addds}, function(results, status) 
 {
 if (status == google.maps.GeocoderStatus.OK) 
 {
 map.setCenter(results[0].geometry.location);
 
 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);
 }
 else 
 {
 alert("Geocode was not successful for the following reason: " + status);
 }
 });
 }
 google.maps.event.addDomListener(window, 'load', initialize);
 
</script>
</head>
 <body style="font-family: Arial; border: 0 none;">
 <div id="map-canvas" style="width: 1500; height: 750px"></div>
 <apex:repeat value="{!Address}" var="a">
 <script>
 arraddress[i]= '{!a.BillingStreet}, {!a.BillingCity}, {!a.BillingPostalCode}, {!a.BillingCountry}';
 arrids[i]='{!a.id}';
 arrnames[i]='{!a.name}';
 i++;
 </script>
 </apex:repeat>
 </body>
 </html>
</apex:page>
Advertisements

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: