jquery ui map clusterer markers aren't displayed

Question

I'am using jquery ui map, i'am loading markers from geoJSON and then i want to clustered them but i can see markers but not cluster.

My code is the following :

$('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
    $('#choose_sentiers').change(function() {
      var selected = $('#choose_sentiers').val();      

      $('#map_tracks').gmap('loadKML', 'sentier', 'http://example.org/media/kml/sentiers_vtt_randos/'+selected+'.kml');

      $.getJSON( "markers.geojson", function( data ) {                
        $.each( data["features"], function( key, val ) {
          var longitude = val["geometry"]["coordinates"][0];
          var latitude = val["geometry"]["coordinates"][1];
          var nom = val["properties"]["NOM"];
          var type = val["properties"]["TYPE"];

          $('#map_tracks').gmap('addMarker', { 
                  'position': new google.maps.LatLng(latitude, longitude)
              }).click(function() {
                  $('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
              });

        });

      });


    });
    $('#map_tracks').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
  });

When i do console.log($(this).gmap('get', 'markers')); it's empty, i don't understand why it's behave like that.

Do-you have an idea ?

Thanks

Answer 1

I have found a way to fix it :

var markercluster;
 $('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
 $('#choose_tracks').change(function() {
  var selected = $('#choose_tracks').val();      

  if ( selected != 'none' )
  {       
    $("#map_tracks").gmap('clear', 'overlays');

    $('#map_tracks').gmap('loadKML', 'sentier', 'http://mynicesite.com/media/kml/'+selected+'.kml');

    $.getJSON( "http://mynicesite.com/media/geojson/sentiers_poi/"+selected+".geojson").done(function( data ) {
      if ( markercluster != undefined )
      {
        markercluster.clearMarkers();
      }

      $.each( data["features"], function( key, val ) {
        var longitude = val["geometry"]["coordinates"][0];
        var latitude = val["geometry"]["coordinates"][1];
        var nom = val["properties"]["NOM"];
        var type = val["properties"]["TYPE"];

        $('#map_tracks').gmap('addMarker', { 
                  'position': new google.maps.LatLng(latitude, longitude),
          'icon':'http://mynicesite.com/media/kml/'+markersIcons[type]['name']
              }).click(function() {
                  $('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
              });    
      });

      markercluster = new MarkerClusterer(map, $('#map_tracks').gmap('get', 'markers'));

      $('#map_tracks').gmap('set', 'MarkerClusterer', markercluster);  
    });

    drawPath(selected);        
  }   
 });    
});