Integrate MarkerClusterer with 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 example I'm working on http://www.mediwales.com/mapping

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

Here is a simple working example of using the MarkerCluster and geocoding in v3 of the API.

In your code, instead of adding the latlng of the marker to Markers array, add the marker objects to your markerClusterer instance directly.

If you add Markers to the markerCluster, it will be empty. The code sends off the geocoding requests, then moves along. By the time the requests are answered by Google, the Markers array has been added to the markerCluster without any markers in it.

You have to add each marker to markerCluster instance directly in the geocoder callback function using the markerCluster's addMarker() method.

EDIT, Response to comment:

Here is your code, with my edits. I can't fully test it because I don't have access to your data, but it should work. I made three changes to fix the code. 1. Create the markerCluster without the markersArray parameter and move it near the top of the code. You'll add the markers individually as they the geocode responses come back. 2. Remove the map parameter from the marker option object. The markerCluster will handle adding the markers to the map. 3. Add the markers to the markerCluster instance individually by using addMarker(marker) in the geocode callback function.

(function() {
    window.onload = function() {
    // Creating an object literal containing the properties we want to pass to the map
    var options = {
    zoom: 10,
    center: new google.maps.LatLng(52.40, -3.61),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Creating the map
    var map = new google.maps.Map(document.getElementById('map'), options);
    // Creating a LatLngBounds object
    var bounds = new google.maps.LatLngBounds();
    // Creating an array that will contain the addresses
    var places = [];
    // Creating a variable that will hold the InfoWindow object
    var infowindow;
    // markerclusterer
    var markerCluster = new MarkerClusterer(map);
    var popup_content = ["<p>DTR Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/dtr-logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/dtr-medical\/\">View profile<\/a>","<p>MediWales<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/index.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/mediwales\/\">View profile<\/a>","<p>Teamworks Design & Marketing<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Teamworks-Design-Logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/teamworks-design-and-marketing\/\">View profile<\/a>","<p>Acuitas Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/acuitas-medical-logo.gif\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/acuitas-medical\/\">View profile<\/a>","<p>Nightingale<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Nightingale.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/nightingale\/\">View profile<\/a>"];var address = ["17 Clarion Court, Llansamlet, Swansea, SA6 8RF","7 Schooner Way, , Cardiff, CF10 4DZ","65 St Brides Rd, Aberkenfig, Bridgend, CF32 9RA","Kings Road, , Swansea, SA1 8PH","Unit 20 Abenbury Way, Wrexham Industrial Estate, Wrexham, LL13 9UG"];
    var geocoder = new google.maps.Geocoder();
    var markers = [];
    // Adding a LatLng object for each city
    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);
    // 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(popup_content[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);
    }

    }
    })
    (); 

Answer 2

it is a scope of variables problem. Actually, you get all values, places[i] returns positions like (51.664566, -3.907799000000068).

markers var is populated into you anonymous function but it is not returned and has the value 0 when called by the following line of code :

var markerCluster = new MarkerClusterer(map, markers);