How can I integrate MakerClusterer with current Google Map? V3

Question

I'm having trouble getting the MarkerClusterer into my current Google Map (which has taken a long time to get this far!!). How can I combine the two? I'm using V3 of the api.

Here's the MarkerClusterer code:

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

Update: I've attempted to add the clusterer to my current code but it doesn't seem to work. Places[i] doesn't seem to feed into the clusterer.

Answer 1

The problem was around the geocoding. Solved with A LOT of playing around:

for (var i = 0; i < address.length; i++) {
    (function(i) {
    geocoder.geocode( {'address': address[i]}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    places[i] = results[0].geometry.location;
    // Adding the markers
    var marker = new google.maps.Marker({position: places[i]});
    markers.push(marker);
    //add the marker to the markerClusterer
    markerCluster.addMarker(marker);

Answer 2

You just need to add each of your markers into an array, then after you've added them all, create the MarkerClusterer object

var markers = [];

// Adding a LatLng object for each city  
for (var i = 0; i < marker_data1.length; i++) { 
    (function(i) { 
        geocoder.geocode( {'address': marker_data1[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                places[i] = results[0].geometry.location;

                // Adding the markers 
                var marker = new google.maps.Marker({
                    position: places[i],
                    map: map,
                    title: 'Place number ' + i,
                });

                markers.push(marker);

                // Creating the event listener. It now has access to the values of 
                // i and marker as they were during its creation
                google.maps.event.addListener(marker, 'click', function() {
                    // Check to see if we already have an InfoWindow
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    // Setting the content of the InfoWindow
                    infowindow.setContent(marker_data[i]);

                    // Tying the InfoWindow to the marker 
                    infowindow.open(map, marker);
                });

                // Extending the bounds object with each LatLng 
                bounds.extend(places[i]); 

                // Adjusting the map to new bounding box 
                map.fitBounds(bounds) 
            } else { 
            alert("Geocode was not successful for the following reason: " + status); 
            } 
        });
    })(i);
} 

var markerCluster = new MarkerClusterer(map, markers);