The MarkerClusterer class provided by google is very handy for grouping together large amounts of markers into clusters. If you have come this far you are probably already aware of the advantages, so I won’t bother with that.
One thing that can be somewhat elusive is how to add an InfoWindow to your marker clusters. The key to getting info windows working is the capturing the new event “clusterclick” and pulling the data from the cluster object then rearranging it to mimic a marker object. Look at the code below for an example of creating info windows for a marker cluster.
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
var markers = [];
var latlng = new google.maps.LatLng(29.9647222, -90.0705556);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create an array of markers in the same area
for (var i = 0; i < 50; i++) {
marker = new google.maps.Marker({
position: latlng,
});
markers.push(marker);
}
// Define the marker clusterer
var clusterOptions = { zoomOnClick: false }
var markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// Listen for a cluster to be clicked
google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
var infowindow = new google.maps.InfoWindow();
infowindow.close();
infowindow.setContent('<h1>Hi this is my Info Window');
infowindow.open(map, info);
});
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 100%; height: 100%;"></div>
</html>
You can view the demo here
[...] I followed the tutorial here to add an inforwindow to the individual clusters of markercluster at any zoom level. http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/ [...]