title: Google Maps Cluster Dropdown?
body: <p>I'm using Google maps to place pins on the world, and I'm using <a href="https://github.com/googlemaps/js-marker-clusterer" rel="nofollow">markercluster.js</a> to cluster the pins when they get too close.  What I'm looking to do is make it so you can hover over a cluster of pins and a drop down will appear showing the titles of the pins in that area.  </p>
  
  <p>I haven't seen anything on the forums about this, so I thought maybe someone else might have run into this and found a solution already.  Thanks for any help in advance!</p>
  
  <p>My code is just the typical way to add pins to the Google maps API.  But I'll list it here just in case.</p>
  
  <pre><code>var bounds = new google.maps.LatLngBounds();
  var markers = [];
  for (i = 0; i &lt; locations.length; i++) {
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
              //icon: '/bin/images/people/' + locations[i][4] + '-1.jpg'
      });
      markers.push(marker);
      bounds.extend(marker.position);
      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
          return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker)
          }
      })(marker, i))
  }
  var clusterStyles = [{
      textColor: 'white',
      url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
      height: 50,
      width: 50
  }, {
      textColor: 'white',
      url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
      height: 50,
      width: 50
  }, {
      textColor: 'white',
      url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
      height: 50,
      width: 50
  }];
  var mcOptions = {
      gridSize: 50,
      styles: clusterStyles,
      maxZoom: 15
  };
  
  var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  
  map.fitBounds(bounds);
  var listener = google.maps.event.addListener(map, "idle", function() {
      map.setZoom(3);
      google.maps.event.removeListener(listener)
  });
  </code></pre>