0

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')));

});
caratage
  • 25
  • 4

1 Answers1

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')));

    });


});
geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Works! Where would I put the options for MarkerClusterer for the grid size and zoom level such as `var mcOptions = {gridSize: 50, maxZoom: 15};`? – caratage Apr 24 '14 at 15:19
  • set `var mcOptions = {gridSize: 50, maxZoom: 15};` and then tried to get mcOptions into MarkerClusterer: `$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map_canvas').gmap('get', 'map'), $('#map_canvas').gmap('get', 'markers'), $('#map_canvas').gmap('get', 'mcOptions')));` – caratage Apr 24 '14 at 16:36