MarkerClusterer & jQuery UI Map: clusters not showing

Question

I am using the jquery-ui-map plugin together with markerclusterer.

Markers are loaded from an external JSON file. This works great to add the markers and content for each info window. No problems so far.

jQuery, jQuery UI Map and MarkerClusterer scripts are properly referenced in my document. However, I can't seem to cluster the markers.

Here my script to show the map. Have I overseen something?

$('#map_canvas').gmap().bind('init', function(event, map) {

    $.getJSON( MY_JSON_URL, function(data) {
        $.each( data.posts, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.custom_fields._cmb_tatort_map_latitude, marker.custom_fields._cmb_tatort_map_longitude)
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 
                    //some content here
                }, this );
            }); 
        });
    });

    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map_canvas').gmap('get', 'map'), $('#map_canvas').gmap('get', 'markers')));

});

Answer 1

You need to create the marker clusterer after the markers have been added to the map, not before.

$('#map_canvas').gmap().bind('init', function(event, map) {

    $.getJSON( MY_JSON_URL, function(data) {
        $.each( data.posts, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.custom_fields._cmb_tatort_map_latitude, marker.custom_fields._cmb_tatort_map_longitude)
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 
                    //some content here
                }, this );
            }); 
        });
       $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map_canvas').gmap('get', 'map'), $('#map_canvas').gmap('get', 'markers')));

    });


});