function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
udayar_jayamudayar_jayam 

How to display many/all accounts in Googlemap in VF

Hi All,

This is the VF page code to disply google map for single Account (billing address)it is working. like this i want to display all the account on Google map. Can anyone please tell how to resolve this issue.Also tell what is the change i need to do for this.  

 

VF Code:

 

<apex:page standardController="Account" >
<apex:pageBlock >
<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var myOptions = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";



var infowindow = new google.maps.InfoWindow({
content: "<b>{!Account.Name}</b>"
});

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("Oops! {!Account.Name}'s address could not be found, please make sure 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:500px;
background:transparent;
}
</style>

</head>

<body>
<div id="map"></div>
</body>
</apex:pageBlock>
</apex:page>

 

Regards,

Udaya

Prakash@SFDCPrakash@SFDC

You need to loop through all accounts in the page and  add those to javascript object and use that for population of MAP.

 

I have worked on the same project . Check the below code . Accept it as a solution if it helps to You .

 

<apex:repeat value="{!accs}" var="acc">
              <script type="text/javascript">
                accs.push(["{!acc.Name}","{!acc.BillingStreet}","{!acc.BillingCity}","{!acc.BillingCountry}",""{!TEXT(acc.Latitude__c)}","{!TEXT(acc.Longitude__c)}","{!acc.Id}"]);
            </script>
        </apex:repeat>
Sascha DeinertSascha Deinert
Hi, 

I have the same project, could you post the whole code.
I know I have to create a class, but how can I change the pagecode.

Thanks,
Sascha