Google maps API v3 cluster markers with info windows

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...

---

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);