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 + "' /> <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 += ']';
}
}
}