Modifier ce qui marche et avoir le clustering

Version imprimable

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:

<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:

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.

Bonjour,
on voit nulle part l'utilisation d'un MarkerClusterer !

Les étapes peuvent se résumer à cela :

Code:

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

24/05/2019, 14h27
french-petzouille

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

oh oh ... merci de ton aide ... je suis arrivé a faire une truc qui marche.

Code:

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...

24/05/2019, 15h04
NoSmoking

Tout est à mettre dans ta fonction $.get('m_geolocmed.php', ..., là où tu récupères les données de tes marqueurs
24/05/2019, 15h31
french-petzouille

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 ?

Citation:

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.

Citation:

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:

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>

24/05/2019, 18h05
french-petzouille

oh !!
avec ton épuration ... rien ne s'affiche !
8O

pas de message d'erreur cependant

Ta suggestion d'alternative à Google ... permet aussi de geocoder ?
pas vu cela en misant rapido la doc
24/05/2019, 18h19
NoSmoking

Citation:

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.

Citation:

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.
24/05/2019, 18h45
french-petzouille

il y a des plug ins pour geocoder.

je te remercie vivement.

sympa de dépanner les englués :-)
24/05/2019, 18h48
NoSmoking

Je ne les connais pas, pas testés : Leaflet Plugins Geocoding