Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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([i].latitude,[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
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.

share|improve this question
up vote 5 down vote accepted

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:\/\/\/mapping\/wp-content\/uploads\/2011\/09\/dtr-logo.png\" \/><br \/><br \/><a href=\"http:\/\/\/mapping\/home\/dtr-medical\/\">View profile<\/a>", "<p>MediWales<\/p><img src=\"http:\/\/\/mapping\/wp-content\/uploads\/2011\/09\/index.png\" \/><br \/><br \/><a href=\"http:\/\/\/mapping\/home\/mediwales\/\">View profile<\/a>", "<p>Teamworks Design & Marketing<\/p><img src=\"http:\/\/\/mapping\/wp-content\/uploads\/2011\/09\/Teamworks-Design-Logo.png\" \/><br \/><br \/><a href=\"http:\/\/\/mapping\/home\/teamworks-design-and-marketing\/\">View profile<\/a>", "<p>Acuitas Medical<\/p><img src=\"http:\/\/\/mapping\/wp-content\/uploads\/2011\/09\/acuitas-medical-logo.gif\" \/><br \/><br \/><a href=\"http:\/\/\/mapping\/home\/acuitas-medical\/\">View profile<\/a>", "<p>Nightingale<\/p><img src=\"http:\/\/\/mapping\/wp-content\/uploads\/2011\/09\/Nightingale.png\" \/><br \/><br \/><a href=\"http:\/\/\/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]});
                        //add the marker to the markerClusterer
                        // 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
                            // Tying the InfoWindow to the marker
                  , marker);
                        // Extending the bounds object with each LatLng
                        // Adjusting the map to new bounding box
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);

share|improve this answer
Thanks for the answer. Could you possibly put it into my code as an example? Until yesterday I didn't know anything about all this so things go a little over my head! – Rob Sep 26 '11 at 17:39
Literally just solved it from your first answer, thanks very much! Only one thing, is there any way to make it smoother so when you click on the cluster it doesn't jump so much? – Rob Sep 26 '11 at 17:58
Really appreciate your help. – Rob Sep 26 '11 at 18:12
@Rob , no problem. Regarding the smoothness, that's something inherent in the library and google maps api. I'm not sure how you would go about fixing it without making some changes to the markercluster source code, or if its even possible – Casey Sep 26 '11 at 18:15
Ok, was just being picky. It works and that's the main thing. Thanks again, wish I came on here sooner, all the nerds in the world on couldn't solve it, you solved it straight away! – Rob Sep 26 '11 at 18:18

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); 
share|improve this answer
Thanks for replying. How can I fix it, literally been banging my head on the table over this! – Rob Sep 26 '11 at 15:56
You could maybe avoid the use of the anonymous function, but anyway, I think you should follow up casey's example! – simo Sep 26 '11 at 16:50

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.