Show data for individual marker in Google Maps API markerclusterer

Question

How can you show data for individual markers?

I am able to show custom data when a mouseover occurs on a Google Maps API markerclusterer cluster but can't work out how to do the same for an individual marker (i.e. when you zoom in to a cluster until you see individual markers).

The code which shows data for the clusters is:

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
  'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);

function refreshMap() {
    if (markerClusterer) {
      markerClusterer.clearMarkers();
    }
    var markers = [];
    var markerImage = new google.maps.MarkerImage(imageUrl,
      new google.maps.Size(24, 32));
    for (var i = 0; i < numItemsToShow; ++i) {
      var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
      var marker = new google.maps.Marker({
       position: latLng,
       icon: markerImage
      });
      markers.push(marker);
    }
    var zoom = parseInt(document.getElementById('zoom').value, 10);
    var size = parseInt(document.getElementById('size').value, 10);
    var style = parseInt(document.getElementById('style').value, 10);
    zoom = zoom == -1 ? null : zoom;
    size = size == -1 ? null : size;
    style = style == -1 ? null: style;

    markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: zoom,
      gridSize: size,
      styles: styles[style]
    });

    // Respond to mouseover on marker cluster
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
      // do something with this cluster ...
      infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
      infoWindow.setPosition(cluster.getCenter());
      infoWindow.open(map);
    });

    // HOW TO RESPOND TO MOUSEOVER ON INDIVIDUAL MARKER?
}

Answer 1

Add a click listener to the google.maps.Marker objects:

var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
 position: latLng,
 icon: markerImage
});
// slightly modified from Google Maps JS API v3 - Simple Multiple Marker Example
// http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(ItemsToShow[i].lat+","+itemsToShow[i].long);
      infowindow.open(map, marker);
    }
})(marker, i));