title: Google maps API v3 cluster markers with info windows
body: <p>I've read the documentation, but my script skills aren't great, so I'm struggling to implement clustering in my Google Map.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/scripts/google-maps-marker-cluster.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      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, '&lt;h2&gt;Organisation AAA&lt;/h2&gt;&lt;address&gt;The address&lt;/address&gt;'],
          ['ZZZ', 50.827138, -0.139432, 1, '&lt;h2&gt;Organisation ZZZ&lt;/h2&gt;&lt;address&gt;The address&lt;/address&gt;']
      ];
  
  
      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 &lt; 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);
              });
          }
      }
  &lt;/script&gt;
  
  &lt;div id="map_canvas"&gt;&lt;/div&gt;  
  </code></pre>
  
  <p>Can anyone tell me the simplest way to cluster these markers?  I've tried moving the <code>var markerCluster = new MarkerClusterer(map);</code> line around in several places, but nothing works.</p>
  
  <p>Thanks for any pointers...</p>