Tous mes marqueurs ne s'affichent pas

**lolo31200** · 10/09/2019, 09h44

Bonjour à toutes et à tous,

Nouvelle sur le forum, je me permets de demander de l'aide car je m'arrache les cheveux depuis plusieurs jours sur un problème avec Google Maps

J'ai mis en place une map sur laquelle je récupère une liste de coordonnées dans ma bdd

J'ai donc ma fonction php qui récupère les infos dans la bdd et qui créé un tableau json avec les résultats récupérés (ici "id" "lat" l"ng" et "title")

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
<?php include('../includes/config.php'); ?>
<?php include('fonctions.php'); ?>
<?php
 
// FICHIER selectData.php
 
// On prépare la requête
$stmt = $bdd->prepare('SELECT id, lat, lng, title FROM markers WHERE statut="1"');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
// On transforme le tableau PHP en json
$retour = json_encode($results);
 
// On retourne le tableau à la fonction appelante
echo $retour; 
?>

Jusqu'ici tout fonctionne, le tableau json généré est correct :

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
// CONTENU DU TABLEAU JSON RECUPERE : 
 
[{"id":"11","lat":"43.6054255","lng":"1.4509642","title":"Mission Ast\u00e9rion"},
{"id":"19","lat":"43.6054256","lng":"1.4509643","title":"Sur les Traces des Gardiens"},
{"id":"20","lat":"43.6096974","lng":"1.4453002","title":"L'antre du chirurgien"},
{"id":"22","lat":"43.6097000","lng":"1.4453100","title":"Aurum Tolosanum (L'or de Toulouse) (Urban Game)"},
{"id":"23","lat":"43.6092961","lng":"1.4488684","title":"Le cachot de la taverne"},
{"id":"24","lat":"43.6058000","lng":"1.4602499","title":"Oh no ! Zombies"},
{"id":"25","lat":"43.6058001","lng":"1.4602500","title":"Braqueurs Amateurs"},
{"id":"26","lat":"43.6058002","lng":"1.4602501","title":"Le temple perdu"},
{"id":"27","lat":"43.6058003","lng":"1.4602502","title":"Derni\u00e8re demeure"},
{"id":"29","lat":"43.6058004","lng":"1.4602503","title":"L'honorable Juge Smith"},
{"id":"30","lat":"43.6058005","lng":"1.4602504","title":"R\u00e9troacteam: les voyageurs du temps"},
{"id":"31","lat":"43.6058006","lng":"1.4602505","title":"Bloc E : Ex\u00e9cution ou Evasion "},
{"id":"32","lat":"43.6058007","lng":"1.4602506","title":"Le Boucher"},
{"id":"33","lat":"43.6058008","lng":"1.4602507","title":"Wanted"},
{"id":"34","lat":"43.6058009","lng":"1.4602508","title":"Un Crime Presque Parfait"},
{"id":"35","lat":"43.6058010","lng":"1.4602509","title":"Tr\u00e8s Cher Lock"},
{"id":"36","lat":"43.6058011","lng":"1.4602510","title":"Chapitre 1 : La Trahison Du Parrain"},
{"id":"37","lat":"43.6058012","lng":"1.4602511","title":"Casino Clandestin [ Escape G\u00e9ant ]"},
{"id":"38","lat":"43.6058013","lng":"1.4602512","title":"La Maison de la Sorci\u00e8re"},
{"id":"40","lat":"43.6058014","lng":"1.4602513","title":"Le laboratoire de Maja EINSTEIN (Escape Game \u00e0 domicile)"},
{"id":"42","lat":"43.6058015","lng":"1.4602514","title":"SAUVEZ LE DOC"},
{"id":"43","lat":"43.6058016","lng":"1.4602515","title":"THE GHOST"},
{"id":"44","lat":"43.6058017","lng":"1.4602516","title":"Intervention furtive"},
{"id":"46","lat":"43.6451865","lng":"1.4354432","title":"Ma salle escape"},
{"id":"47","lat":"43.5994723","lng":"1.4426951","title":"Escale Transylvania"},
{"id":"48","lat":"43.6349137","lng":"1.4832819","title":"Braquage \u00e0 l'Ancienne"},
{"id":"49","lat":"43.6349138","lng":"1.4832820","title":"Menace Toxique "}]

Pourtant la carte n'affiche que 7 marqueurs, ce sont toujours les mêmes : Les id : 19, 20, 23, 44, 46,47,49
Les autres ne s'affichent pas.

J'ai enlevé les titres pour voir si les caractères spéciaux posaient problème mais ça ne fonctionne pas.

Pour l'affichage de la carte et des markers, voici mon script :

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
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=MACLEAPIGOOGLEMAPS"></script>
		<script async type="text/javascript">
			// On initialise la latitude et la longitude de Toulouse (centre de la carte)
			var lat = 43.6043;
			var lon = 1.4437;
			var map = null;
			// Nous initialisons une liste de marqueurs
 
			function initMap() {
				map = new google.maps.Map(document.getElementById("map"), {
					center: new google.maps.LatLng(lat, lon),
					zoom: 11,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					mapTypeControl: true,
					scrollwheel: false,
					mapTypeControlOptions: {
						style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
					},
						navigationControl: true,
						navigationControlOptions: {
						style: google.maps.NavigationControlStyle.ZOOM_PAN
					}
				});
 
				// Nous appelons la fonction ajax de jQuery
				$.ajax({
					// On pointe vers le fichier selectData.php
					url : "fonctions/selectData.php",
				}).done(function(json){ // Si on obtient une réponse, elle est stockée dans la variable json
					// On construit l'objet villes à partir de la variable json
					var villes = JSON.parse(json);
					// On parcourt l'objet villes
					for(ville in villes){
 
						var image2 = "img/marker.png";
						var marker = new google.maps.Marker({
							// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
							position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lng)},
							title: villes[ville].title,
							animation: google.maps.Animation.DROP,
							map: map,
							icon: image2,
							url: "escape-game-" + villes[ville].title + "_" + villes[ville].id + ".php"
						});	
 
						google.maps.event.addListener(marker, 'click', function() {
							window.location.href = this.url;
						});
 
					}
					setTimeout(json, 5000);
				});
			}
			window.onload = function(){
				// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
				initMap(); 
			};
		</script>

Y a t'il des limites d'affichages avec Google? 7 markers, c'est pas beaucoup. L'erreur doit venir de mon script mais je ne trouve pas

Merci d'avance pour votre aide

**Celira** · 10/09/2019, 10h43

Est-ce que le problème ne viendrait pas des coordonnées ?
parce que bon, pour les points 20 et 22 pour exemple :

Code :

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

1
2
{"id":"20","lat":"43.6096974","lng":"1.4453002","title":"L'antre du chirurgien"},
{"id":"22","lat":"43.6097000","lng":"1.4453100","title":"Aurum Tolosanum (L'or de Toulouse) (Urban Game)"},

La différence entre les coordonnées se joue au 100 000e de dégré. Si on fait un calcul de distance entre les 2 points, on obtient la distance mirifique de 80 cm. Est-ce que par hasard Maps ne considère pas qu'il y a déjà un pointeur à cet endroit et refuse d'en ajouter un 2e ?

**lolo31200** · 10/09/2019, 10h56

Merci beaucoup pour la réponse :à

Oui ça me semble possible car j'avais plusieurs points aux mêmes coordonnées. J'ai essayé de rajouter +1 à certaines latitudes et longitudes pour voir si ça changeait, mais rien de plus.

Du coup en fouillant j'ai vu que Google permettait de faire des regroupements de markers en clusters.

J'ai essayé de créer mes clusters en rajoutant ce code dans mon script :

Code js :

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

1
2
3
4
var markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: 9, // maxZoom set when clustering will stop
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
});

J'ai également inclus le js markerclusterer.js dans ma page

Code html :

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
63
64
65
66
 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=MACLEAPIGOOGLEMAPS"></script>
		<script async type="text/javascript">
                        // On initialise la latitude et la longitude de Toulouse (centre de la carte)
                        var lat = 43.6043;
                        var lon = 1.4437;
                        var map = null;
                        // Nous initialisons une liste de marqueurs
 
                        function initMap() {
                                map = new google.maps.Map(document.getElementById("map"), {
                                        center: new google.maps.LatLng(lat, lon),
                                        zoom: 11,
                                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                                        mapTypeControl: true,
                                        scrollwheel: false,
                                        mapTypeControlOptions: {
                                                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                                        },
                                                navigationControl: true,
                                                navigationControlOptions: {
                                                style: google.maps.NavigationControlStyle.ZOOM_PAN
                                        }
                                });
 
                                // Nous appelons la fonction ajax de jQuery
                                $.ajax({
                                        // On pointe vers le fichier selectData.php
                                        url : "fonctions/selectData.php",
                                }).done(function(json){ // Si on obtient une réponse, elle est stockée dans la variable json
                                        // On construit l'objet villes à partir de la variable json
                                        var villes = JSON.parse(json);
                                        // On parcourt l'objet villes
                                        for(ville in villes){
 
                                                var image2 = "img/marker.png";
                                                var marker = new google.maps.Marker({
                                                        // parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
                                                        position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lng)},
                                                        title: villes[ville].title,
                                                        animation: google.maps.Animation.DROP,
                                                        map: map,
                                                        icon: image2,
                                                        url: "escape-game-" + villes[ville].title + "_" + villes[ville].id + ".php"
                                                });     
                                                
                                                var markerClusterer = new MarkerClusterer(map, markers, {
                                                        maxZoom: 9, // maxZoom set when clustering will stop
                                                        imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
                                                });
 
                                                google.maps.event.addListener(marker, 'click', function() {
                                                        window.location.href = this.url;
                                                });
 
                                        }
                                        setTimeout(json, 5000);
                                });
                        }
                        window.onload = function(){
                                // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
                                initMap(); 
                        };
                </script>

Je suis vraiment désolée, j'ai du mal à comprendre la logique. Je me retrouve avec qu'un seul marker.

Est ce que j'oublie quelque chose dans mon code

**NoSmoking** · 12/09/2019, 10h06

Bonjour,
il ressort que la chronologie de ton code n'est pas bonne dans la partie .done(function(json) {.

Voir les remarques/commentaires dans le code

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
$.ajax({
  // On pointe vers le fichier selectData.php
  url: "fonctions/selectData.php",
  dataType: "json",  // défini le type de données à traiter
}).done(function(json) { // Si on obtient une réponse, elle est stockée dans la variable json
//-------
//--(0)--
//-------
  // array pour stocker les marqueurs
  var tabMarkers = [];
  // On construit l'objet villes à partir de la variable json
  // var villes = JSON.parse(json);
  var villes = json;  // est déjà au format objet
//-------
//--(1)--
//-------
  // On parcourt l'objet villes
  for (ville in villes) {
    var image2 = "img/marker.png";
    var marker = new google.maps.Marker({
      // parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
      position: {
        lat: parseFloat(villes[ville].lat),
        lng: parseFloat(villes[ville].lng)
      },
      title: villes[ville].title,
      animation: google.maps.Animation.DROP,
      map: map,
      icon: image2,
      url: "escape-game-" + villes[ville].title + "_" + villes[ville].id + ".php"
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.location.href = this.url;
    });
    // stockage du marker
    tabMarkers.push(marker);
  }
//-------
//--(2)--
//-------
  // création des clusters lors que l'on a lu tous les marqueurs
  var markerClusterer = new MarkerClusterer(map, tabMarkers, {
    maxZoom: 9, // maxZoom set when clustering will stop
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
  });
  // c'est quoi çà ?????
  //setTimeout(json, 5000);
});

**lolo31200** · 12/09/2019, 22h52

Bonjour,

Merci beaucoup pour tes précisions. Les clusters fonctionnent correctement.
J'ai trouvé la solution au problème de markers sur la même adresse, j'ai ajouté un nombre aléatoire aux coordonnées

Merci pour tout, bonne soirée

Tous mes marqueurs ne s'affichent pas [Google Maps]

APIs Google

Discussions similaires

Partager

Partager