Display related contacts in google map for an account in salesforce

Hi Kumar,

<apex:page standardController=”Account” extensions=”ContactsOnGoogleMapController” showHeader=”false” sidebar=”false” standardStylesheets=”false”>

<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?sensor=false”></script>

<script type=”text/javascript”>
var mapicon = JSON.parse(‘{!contactJson}’);
var url = ”;

window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(mapicon[0].lat, mapicon[0].lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById(“dvMap”), mapOptions);

for (var i = 0; i < mapicon.length; i++) {
var data = mapicon[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);

var image = {
url: data.icon,
size: new google.maps.Size(100, 65),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(65, 65)
};

if(‘null’ == data.email){
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: image,
contact: data.contact
});
}

else{
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
contact: data.contact
});
}
(function (marker, data) {
google.maps.event.addListener(marker, “click”, function (e) {
url = ‘https://roopamalgo-dev-ed.my.salesforce.com/’+data.Id;
infoWindow.setContent(“<div style = ‘width:100%;height:40%’><img width=’60px’ height=’60px’ align = ‘middle’ src = ‘” + data.icon + “‘ />&nbsp;&nbsp;<b>”+ data.title + “<b/><br/><a href=’#’ onclick=’event.preventDefault();popup(url)’;>LINK</a><br/>”+data.address+”</div>”);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}

map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}

function popup(url)
{
newwindow=window.open(url,’name’,’width=830,height=600,top=0,toolbar=no,personalbar=no,location=no,directories=no,statusbar=no,menubar=no,status=no,resizable=yes,left=60,screenX=350,top=100,screenY=100′);
if(window.focus){
newwindow.focus();
}
url = ”;
}

</script>

<div id=”dvMap” style=”width: 100%; height: 300px”>
</div>

</apex:page>

Controller

public class ContactsOnGoogleMapController {

public String contactJson{get;set;}
private Account acct;

public ContactsOnGoogleMapController(ApexPages.StandardController controller){

this.acct = (Account)controller.getRecord();
List<Contact> conList = [select Id,Name,Email,Phone,GoogleLatitude__c,GoogleLongitude__c,MailingLatitude,MailingLongitude,MailingStreet,MailingCity,MailingState,MailingCountry,PhotoUrl from Contact where accountId = :acct.Id];

String baseURL = ‘https://ap2.salesforce.com’;
String coma = ”;

if(conList.size() > 0){
contactJson = ‘[‘;

for(Contact con : conList){
contactJson += coma + ‘{\”title\”:\”‘ + con.Name + ‘\”,’+
‘\”lat\”: \”‘ + con.GoogleLatitude__c + ‘\”,’+
‘\”lng”: \”‘ + con.GoogleLongitude__c +’\”,’+
‘\”address\”: \”‘ + con.MailingStreet +’ ‘+ con.MailingCity +'<br/>’+ con.MailingState + ‘<br/>’ +con.MailingCountry + ‘\”,’+
‘\”contact\”: \”‘ + con.Phone + ‘\”,’+
‘\”email\”: \”‘ + con.Email + ‘\”,’+
‘\”Id\”: \”‘ + con.Id + ‘\”,’+
‘\”icon\”: \”‘ + baseURL +”+ con.PhotoUrl + ‘\”}’;

coma = ‘,’;
}

contactJson += ‘]’;

}
}
}