Discussion :

[xillibit]

Bonjour,

J'utilise jQuery et la librarie jquery ui map, j'arrive à afficher les marqueurs sur une carte provenant d'un fichier geojson, je voulais les regrouper sous forme de markerclusterer mais cela ne fonctionne pas.

Dans le head de ma page je charge normalement tout ce qu'il faut :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/markerclusterer.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery_maps.js"></script>

Le fichier jquery_maps.js contient le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function($){ 
$('#map_sentiers').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
    $('#choose_sentiers').change(function() {
      var selected = $('#choose_sentiers').val();      
 
      $('#map_sentiers').gmap('loadKML', 'sentier', 'http://example.com/kml/sentiers/'+selected+'.kml');
 
      $.getJSON( "js/rocher_blanc.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_sentiers').gmap('addMarker', { 
  				  'position': new google.maps.LatLng(latitude, longitude)
  			  }).click(function() {
  				  $('#map_sentiers').gmap('openInfoWindow', { 'content': nom }, this);
  			  });    
        });
      });   
    });    
    $('#map_sentiers').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
  });
})(jQuery);

Auriez-vous une idée du pourquoi les marqueurs ne sont pas regroupés ?

Merci d'avance

[NoSmoking]

Bonjour,
tout ton problème se situe dans l'utilisation de données non encore disponibles
Un classique AJAX : utiliser les données au bon moment ! .

La fonction de rappel (callback) utilisée dans ton appel $.getJSON s'effectue après, le temps est variable, la fonction qui suit ton appel à $.getJSON...

Dans ton code il te faut donc mettre la fonction d'utilisation des données dans la fonction callback.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
(function ($) {
    $('#map_sentiers').gmap({
        'center': '45.752051,6.295604',
        'zoom': 12
    }).bind('init', function (ev, map) {
        $('#choose_sentiers').change(function () {
            var selected = $('#choose_sentiers').val();
            $('#map_sentiers').gmap('loadKML', 'sentier', 'http://example.com/kml/sentiers/' + selected + '.kml');
            $.getJSON("js/rocher_blanc.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_sentiers').gmap('addMarker', {
                        'position': new google.maps.LatLng(latitude, longitude)
                    }).click(function () {
                        $('#map_sentiers').gmap('openInfoWindow', {
                            'content': nom
                        }, this);
                    });
                });
                //------------------
                // devrait être ICI
                //------------------                
                $('#map_sentiers').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
            });
        });
        //------------------
        // MAIS PAS ICI
        //------------------
        // $('#map_sentiers').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
    });
})(jQuery);

[xillibit]

J'ai solutionné mon problème en faisant de la manière suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function($){ 
$('#map_sentiers').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
    $('#choose_sentiers').change(function() {
      var selected = $('#choose_sentiers').val();      
 
      $('#map_sentiers').gmap('loadKML', 'sentier', 'http://example.com/kml/sentiers/'+selected+'.kml');
 
      var request = $.getJSON( "js/rocher_blanc.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_sentiers').gmap('addMarker', { 
  				  'position': new google.maps.LatLng(latitude, longitude)
  			  }).click(function() {
  				  $('#map_sentiers').gmap('openInfoWindow', { 'content': nom }, this);
  			  });    
        });
      }); 
      request.complete(function() {        
        $('#map_sentiers').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $('#map_sentiers').gmap('get', 'markers')));
      });  
    }); 
  });
})(jQuery);

[NoSmoking]

Pourquoi faire simple quand on peut faire compliqué....


jQuery.getJSON() s'utilise comme suit jQuery.getJSON( url [, data ] [, success ] ), donc pourquoi vouloir récupérer l'objJquery pour lui affecter une fonction sur son oncomplete qui ne fait pas de différence entre une requête réussie ou non.

[xillibit]

La méthode success est obsolète il faut utiliser done(), c'est ce que j'ai fait dans mon code pour éviter que cela soit compliqué