Google maps API v3 cluster markers with info windows - google-maps-api-3

Question

I've read the documentation, but my script skills aren't great, so I'm struggling to implement clustering in my Google Map.
The code I have works fine - taking an array of locations and plotting them onto a map. However, I have several hundred points on the map now, so I need to crudely cluster these just so the map is cleaner. The code I have is like this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/google-maps-marker-cluster.js"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(54.5753459, -3.9550781);
var myOptions = {
zoom: 6,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var markerCluster = new MarkerClusterer(map,sites);
}
var sites = [
['AAA', 57.340558, -2.324553, 1, '<h2>Organisation AAA</h2><address>The address</address>'],
['ZZZ', 50.827138, -0.139432, 1, '<h2>Organisation ZZZ</h2><address>The address</address>']
];
function setMarkers(map, markers) {
var image = new google.maps.MarkerImage('/css/img/icon.png',
new google.maps.Size(16, 16),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var shadow = new google.maps.MarkerImage('/css/img/shadow.png',
new google.maps.Size(37, 14),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
shape: shape,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<div id="map_canvas"></div>
Can anyone tell me the simplest way to cluster these markers? I've tried moving the var markerCluster = new MarkerClusterer(map); line around in several places, but nothing works.
Thanks for any pointers...

Answer 1

Here's how I'm doing it in a Rails project. It's pretty similar to yours except I'm looping a Rails variable and assigning that to the javascript to build the markers array.
The biggest difference here is that my markers are being scoped inside my initialize function.
function initialize() {
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 8,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var latlnglist = []
var markers = []
var infowindow = new google.maps.InfoWindow({
content: "Loading..."
})
<% #map.each do |artwork| %>
<% unless artwork.location.blank? %>
latlnglist.push(artwork_lat_lng = new google.maps.LatLng (<%= artwork.lat %>, <%= artwork.lng %>))
markers.push(marker = new google.maps.Marker({
position: artwork_lat_lng,
title: "<%=raw escape_javascript(artwork.title) %>",
html: "<%=raw escape_javascript("#{link_to image_fu(artwork.image, '315x120>', :size => '315x120', :alt => artwork.title), map_url(artwork)} <h4>#{artwork.page_title}</h4>") %>"
}))
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(this.html);
infowindow.open(map, this);
})
<% end %>
<% end %>
var mcOptions = {
gridSize: 50,
maxZoom: 15
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = latlnglist.length; i < len; i++) {
bounds.extend(latlnglist[i]);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);