I have created a new example and here is what the page looks like now:
<apex:page sidebar="false" showHeader="false" cache="false" controller="GoogleMap_Accounts_Controller">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
// set the map options in the format that V3 of googlemaps expects
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(32.5206608,-86.80249),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// attach our map to the map_canvas div
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
// Pull the data in from the SOQL and use visualforce to create the javascript calls
<apex:repeat value="{!AccountsList}" var="Account">
showAddress("{!JSENCODE(Account.Name)}", "{!JSENCODE(Account.Name)} <a href='../{!Account.id}' target='_blank'>Details</a>", "{!Account.BillingLat__c}", "{!Account.BillingLong__c}");
</apex:repeat>
} // function initialize()
google.maps.event.addDomListener(window, 'load', initialize);
function showAddress(title, content, Lat, Long) {
// convert our raw values to the format that google expects
var latlng = new google.maps.LatLng(parseFloat(Lat), parseFloat(Long));
if (latlng != null) {
// create an info window
var infowindow = new google.maps.InfoWindow({
content: content
});
// Create a marker on the map
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title
});
// Add an event to the marker so the info window will appear when it is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} // check for null latlng due an error parsing
} // end show address
</script>
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</apex:page>
I have posted the code on Git Hub for easy downloading. The sample page and controller can be found here.
