IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

APIs Google Discussion :

Modifier ce qui marche et avoir le clustering [Google Maps]


Sujet :

APIs Google

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 83
    Points : 43
    Points
    43
    Par défaut Modifier ce qui marche et avoir le clustering
    bonjour à tous

    J'ai une page qui me permet d'afficher CORRECTEMENT sur une carte des marqueurs via la fonction InitMap() suivante.

    Elle est grandement issue de recherches sur le web

    Mon but : Que rajouter dans cette fonction pour avoir le clustering des marqueurs ?

    Je précise que :

    # J'ai mis dans mon <head> de page la ligne supplémentaire suivante :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="images/markerclusterer.js"></script>

    # et que j'ai mis les images de cluster dans le dossier : "images/"


    # Les marqueurs sur la cartes sont tirés d'une page 'm_geolocmed.php' ... ( page qui génère un fichier xml suite à une requête mysql SELECT ... qui va piocher les info dans ma bdd)


    Voila la tronche ( en biais) de la fonction InitMap ... qui est OK poru juste afficher les markers sur la carte :

    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    function initMap(iconPerso,adresse,zoomLevel) 
    {
    	var zoomPerso=parseInt(zoomLevel);
    	map = new google.maps.Map(document.getElementById('map_canvas'), {
    		zoom:zoomPerso,
    		mapTypeControl: true,
      		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    	});
     
    	var geocoder = new google.maps.Geocoder();
     
    	geocoder.geocode({'address': adresse}, function(results, status) {
    	  	if (status === 'OK')
    	  	{
    			map.setCenter(results[0].geometry.location);
    			new google.maps.Marker({
    		  	map: map,
    		  	title:"Centrage carte demandé sur : "+adresse,
    		  	position: results[0].geometry.location,
    		  	draggable: true,
    		  	animation: google.maps.Animation.DROP});
    	    } 
    	    else
    	    {
    			window.alert('Géocodage infructueux pour la raison suivante : ' +status);
    	    }
     
    	    // chargement des coordonnées des praticiens
    	    $.get('m_geolocmed.php', function(data) {
    		  $(data).find('marker').each(function(){
    			  var m = $(this);
    			  var latlng= { lat:parseFloat(m.attr('lat')), lng:parseFloat(m.attr('lng')) };
    			  var marker = new google.maps.Marker({
    						  position:latlng,
    						  map:map,
    						  icon: iconPerso,
    						  animation: google.maps.Animation.DROP,
    						  draggable:true,
    					});
    			  var bulle= ['<span class="r">M '+m.attr('nom')+' '+m.attr('prenom')+'</span>',
    							  m.attr('adresse')!=''? m.attr('adresse') : '',
    							  m.attr('tel')!=''? 'Tél Cab. : '+m.attr('tel')+'' : ''].join('<br />');
    			  var infoWindow = new google.maps.InfoWindow({content: bulle, position:latlng});
     
    			  marker.addListener('click', function(){infoWindow.open(map,marker);})
    		  });
    	  });
    	});
    }
    Je sèche totalement pour ajouter et où et comment la partie clustering.

    merci de votre aide.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    on voit nulle part l'utilisation d'un MarkerClusterer !

    Les étapes peuvent se résumer à cela :
    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
    // déclaration des variables
    var oMap;
    var tabMarkers = [];
     
    // initialisation basique
    var oMap = new google.maps.Map(document.getElementById("div-carte"), {
      "zoom": 6,
      "center": {
        "lat": 46.8,
        "lng": 1.7
      },
      "mapTypeId": google.maps.MapTypeId.ROADMAP
    });
    // on suppose que data représente le tableau contenant les données
    data.each(function() {
      // création du marqueur
      var marker = new google.maps.Marker({
        'position': {
          "lat": data[i].lat,
          "lng": data[i].lng
        }
      });
      // stockage du marqueur
      tabMarkers.push(marker);
    });
    // option pour MarkerClusterer par exemple
    var clusterOptions = {
      gridSize: 50,
      maxZoom: 15
    };
    // création et affectation du MarkerClusterer
    var oCluster = new MarkerClusterer(oMap, tabMarkers, clusterOptions);
    A adapter à ton besoin

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 83
    Points : 43
    Points
    43
    Par défaut
    En effet je n'ai pas mis de mention au MarkerClusterer ... car je ne sais pas où fiche cela .

    Est-ce glissable dans ma fonction qui marche bien ?
    faut-il faire autre chose ...mais j'aurai la problématique de générer le tableau des markers dans le format attendu par l'API.

    en fait je patauge allègrement

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 83
    Points : 43
    Points
    43
    Par défaut
    oh oh ... merci de ton aide ... je suis arrivé a faire une truc qui marche.

    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    function initMap(iconPerso,adresse,zoomLevel) 
    {
    	var zoomPerso=parseInt(zoomLevel);
    	map = new google.maps.Map(document.getElementById('map_canvas'), {
    		zoom:zoomPerso,
    		mapTypeControl: true,
      		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    	});
    	var tabMarkers = [];
    	var geocoder = new google.maps.Geocoder();
     
    	geocoder.geocode({'address': adresse}, function(results, status) 
    	{
    	  	if (status === 'OK')
    	  	{
    			map.setCenter(results[0].geometry.location);
    			new google.maps.Marker({
    		  	map: map,
    		  	title:"Centrage carte demandé sur : "+adresse,
    		  	position: results[0].geometry.location,
    		  	draggable: true,
    		  	animation: google.maps.Animation.DROP});
    	    } 
    	    else
    	    {
    			window.alert('Géocodage infructueux pour la raison suivante : ' +status);
    	    }
     
    	    // chargement des coordonnées des praticiens
    	    $.get('m_geolocmed.php', function(data) {
    		  $(data).find('marker').each(function(){
    				var m = $(this);
    				var latlng= { lat:parseFloat(m.attr('lat')), lng:parseFloat(m.attr('lng')) };
    				var marker = new google.maps.Marker({
    						  position:latlng,
    						  map:map,
    						  icon: m.attr('genre')==1 ? 'images/female.png' : 'images/male.png',
    						  animation: google.maps.Animation.DROP,
    						  draggable:true,
    				});
     
    				// stockage du marqueur cluster
    				tabMarkers.push(marker);
    				var bulle= ['<h3 class="r" style="font-weight:bold;">Dr '+m.attr('nom')+' '+m.attr('prenom')+'</h3>',
    							  m.attr('adresse')!=''? m.attr('adresse') : '',
    							  m.attr('tel')!=''? 'Tél Cab. : '+m.attr('tel')+'' : ''].join('<br />');
    				var infoWindow = new google.maps.InfoWindow({content: bulle, position:latlng});
    				marker.addListener('click', function(){infoWindow.open(map,marker);})
    				//google.maps.event.addListener(marker,'mouseout', function(){infoWindow.close();});
    		  });
     
    		// option pour MarkerClusterer par exemple
    		var clusterOptions = {
    		  gridSize: 50,
    		  maxZoom: 15,
    		  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    		};
    		// création et affectation du MarkerClusterer
    		var oCluster = new MarkerClusterer(map, tabMarkers, clusterOptions);
    	  });
    	});
    }
    me faut voir si je peux mettre en place ...la "toile d'araignée" un truc nommé spider marker ou qq chose comme ca que j'ai vu qq part sur le web...

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Tout est à mettre dans ta fonction $.get('m_geolocmed.php', ..., là où tu récupères les données de tes marqueurs

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 83
    Points : 43
    Points
    43
    Par défaut
    je me permet de te demander ton avis.

    A ton avis ... la fonction que j'utilise fait référence à l'objet geocoder via : var geocoder = new google.maps.Geocoder();

    Y a t-il géocodage à chaque appel de cette fonction ??

    Car dans mon cas ... je dispose déjà de la latitude et longitude des markers dans ma BDD . Le geocodage a déjà été fait auparavant en insérant des tuples dans ma bdd.
    Je me contenterai juste d'afficher les markers.

    Que puis-je virer sans tout chambouler ce que tu m'as permis de faire fonctionner ?

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Y a t-il géocodage à chaque appel de cette fonction ??
    Non uniquement lors de l'appel à ta fonction initMap, donc à chaque chargement de ta page.

    Que puis-je virer sans tout chambouler ce que tu m'as permis de faire fonctionner ?
    Tout ce qui concerne le Geocoder, tu peux donc épurer ton code, voir ci dessous
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    function initMap(iconPerso, adresse, zoomLevel) {
        var zoomPerso = parseInt(zoomLevel);
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: zoomPerso,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        });
        var tabMarkers = [];
     
        // chargement des coordonnées des praticiens
        $.get('m_geolocmed.php', function(data) {
            $(data).find('marker').each(function() {
                var m = $(this);
                var latlng = {
                    lat: parseFloat(m.attr('lat')),
                    lng: parseFloat(m.attr('lng'))
                };
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    icon: m.attr('genre') == 1 ? 'images/female.png' : 'images/male.png',
                    animation: google.maps.Animation.DROP,
                    draggable: true,
                });
     
                // stockage du marqueur cluster
                tabMarkers.push(marker);
                var bulle = ['<h3 class="r" style="font-weight:bold;">Dr ' + m.attr('nom') + ' ' + m.attr('prenom') + '</h3>',
                    m.attr('adresse') != '' ? m.attr('adresse') : '',
                    m.attr('tel') != '' ? 'Tél Cab. : ' + m.attr('tel') + '' : ''
                ].join('<br />');
                var infoWindow = new google.maps.InfoWindow({
                    content: bulle,
                    position: latlng
                });
                marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                })
                //google.maps.event.addListener(marker,'mouseout', function(){infoWindow.close();});
            });
     
            // option pour MarkerClusterer par exemple
            var clusterOptions = {
                gridSize: 50,
                maxZoom: 15,
                imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
            };
            // création et affectation du MarkerClusterer
            var oCluster = new MarkerClusterer(map, tabMarkers, clusterOptions);
        });
    }
    <!PUB>
    <p>Il faut savoir que tu peux obtenir la même chose, avec par exemple Leaflet, et cela sans que cela ne coûte un centime.</p>
    </!PUB>

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 83
    Points : 43
    Points
    43
    Par défaut
    oh !!
    avec ton épuration ... rien ne s'affiche !


    pas de message d'erreur cependant


    Ta suggestion d'alternative à Google ... permet aussi de geocoder ?
    pas vu cela en misant rapido la doc

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    pas de message d'erreur cependant
    J'ai débroussaillé à la faux sans trop regarder, il semblerait qu'il te manque la position du centre que tu initialisais après en retour de geocode.

    Ta suggestion d'alternative à Google ... permet aussi de geocoder ?
    Je ne saurais te dire comme cela mais comme tu as déjà tous tes points cela ne devrait pas te manquer !
    Il faudrait regarder plus avant dans les plugins.

  10. #10
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 83
    Points : 43
    Points
    43
    Par défaut
    il y a des plug ins pour geocoder.

    je te remercie vivement.

    sympa de dépanner les englués :-)

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Je ne les connais pas, pas testés : Leaflet Plugins Geocoding

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. une comparaison qui marche pas.
    Par gandf dans le forum C++Builder
    Réponses: 7
    Dernier message: 16/02/2004, 16h59
  2. [LG]Split qui marche pas
    Par macluvitch dans le forum Langage
    Réponses: 3
    Dernier message: 30/11/2003, 19h19
  3. Pb : malloc qui marche une fois sur deux .... ?
    Par guillaume_pfr dans le forum C
    Réponses: 14
    Dernier message: 21/07/2003, 10h52
  4. Sysdate qui marche pas ??
    Par StouffR dans le forum Langage SQL
    Réponses: 4
    Dernier message: 28/08/2002, 14h23
  5. Créer une fenêtre flottante qui ne peut avoir le focus
    Par BestofMac dans le forum Composants VCL
    Réponses: 4
    Dernier message: 17/07/2002, 11h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo