Unable to add markers to Marker Cluster

Question

I'm attempting to add my markers to a MarkerCluster, I have the following code, I push each Marker to the markers array. I then declare markerCluster and add in the markers array and the map. However my MarkersClusterer never display, could anyone suggest why this is?

map = new google.maps.Map($('#map_canvas')[0], myOptions);
infowindow = new google.maps.InfoWindow();
markerCluster = new MarkerClusterer(map, markers);

//do ajax request, add marker on success
jQuery.post(ajaxurl, data, function(response) {

    for (key in response) {
        if(response[key]["post_code"] === undefined ){
            return; 
        }
        (function () {
            var markers = [];
            var address = response[key]["address"];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+response[key]["post_code"]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var Marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    content: address
                });
                markers.push(Marker);
                google.maps.event.addListener(Marker, 'click', function () {    
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                });
            });
        })();
    };
});

In `markerCluster = new MarkerClusterer(map, markers);` is `markers` defined? I don't see it defined anywhere. — VVV, May 26 '16 at 13:42
It's not in the same scope so it's undefined... but that's not the only error. Can you create a fiddle so I can play with it? I've done this many times, the fix is pretty easy but I need to play with your fiddle. — VVV, May 26 '16 at 13:45
I have var markers = []; to a global scope (outside of 'document.ready'), however it is still undefined. — Liam Fell, May 26 '16 at 13:46

Matej P. · Accepted Answer · 2016-05-26T13:58:28.157

Your markers variable is defined outside of the scope when it's used in MarkerClusterer. You add markers to different markers which only exists inside the anonymous (function(){.. . To understand this problem, I suggest you to take a look at this or this article.

EDIT

ALSO! As user vyx.ca pointed out, MarkerClusterer has addMarker() method which is the advised way of adding markers to the clusterer. My code now reflects the change.

There are commented parts of code referring to the changes:

var markers = []; //HERE!!
map = new google.maps.Map($('#map_canvas')[0], myOptions);
infowindow = new google.maps.InfoWindow();
markerCluster = new MarkerClusterer(map, markers);

jQuery.post(ajaxurl, data, function(response) {

    for (key in response) {
        if(response[key]["post_code"] === undefined ){
            return; 
        }
        (function () {
            //REMOVE THIS !! var markers = []; 
            var address = response[key]["address"];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+response[key]["post_code"]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var Marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    content: address
                });
                //Changed to line below - markers.push(Marker);
                markerCluster.addMarker(Marker);
                google.maps.event.addListener(Marker, 'click', function () {    
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                });
            });
        })();
    };
});

If this doesn't work, change `markers.push(Marker);` to `markerClusterer.addMarker(Marker);` — VVV, May 26 '16 at 13:48
Thanks! this works now, I have a strange issue where no icon appears as the cluster (I get only a number). I'll look in to this though. — Liam Fell, May 26 '16 at 14:01
Take a look at this answer: http://stackoverflow.com/a/37184213/2661226 You might just have to set the correct url of the image. — Matej P., May 26 '16 at 14:03

Unable to add markers to Marker Cluster

1 Answers1