Adding info windows to map clusters with google maps api v3

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

One Response to “Adding info windows to map clusters with google maps api v3”

Leave a Reply

See also: