10618 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tout le monde,

Je m'arrache les cheveux depuis plusieurs jours sur un problème avec Google Maps et mon script fonctionne presque, je vous explique :

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


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


// 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.6058000","lng":"1.4602499","title":"Braqueurs Amateurs"},
{"id":"26","lat":"43.6058000","lng":"1.4602499","title":"Le temple perdu"},
{"id":"27","lat":"43.6058000","lng":"1.4602499","title":"Derni\u00e8re demeure"},
{"id":"29","lat":"43.6058000","lng":"1.4602499","title":"L'honorable Juge Smith"},
{"id":"30","lat":"43.6058000","lng":"1.4602499","title":"R\u00e9troacteam: les voyageurs du temps"},
{"id":"31","lat":"43.6058000","lng":"1.4602499","title":"Bloc E : Ex\u00e9cution ou Evasion "},
{"id":"32","lat":"43.6058000","lng":"1.4602499","title":"Le Boucher"},
{"id":"33","lat":"43.6058000","lng":"1.4602499","title":"Wanted"},
{"id":"34","lat":"43.6058000","lng":"1.4602499","title":"Un Crime Presque Parfait"},
{"id":"35","lat":"43.6058000","lng":"1.4602499","title":"Tr\u00e8s Cher Lock"},
{"id":"36","lat":"43.6058000","lng":"1.4602499","title":"Chapitre 1 : La Trahison Du Parrain"},
{"id":"37","lat":"43.6058000","lng":"1.4602499","title":"Casino Clandestin [ Escape G\u00e9ant ]"},
{"id":"38","lat":"43.6058000","lng":"1.4602499","title":"La Maison de la Sorci\u00e8re"},
{"id":"40","lat":"43.6058000","lng":"1.4602499","title":"Le laboratoire de Maja EINSTEIN (Escape Game \u00e0 domicile)"},
{"id":"42","lat":"43.6058000","lng":"1.4602499","title":"SAUVEZ LE DOC"},
{"id":"43","lat":"43.6058000","lng":"1.4602499","title":"THE GHOST"},
{"id":"44","lat":"43.6058000","lng":"1.4602499","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.6349137","lng":"1.4832819","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 :


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


Donc vu que les résultats sont bien récupérés dans le tableau json et bien transmis à la carte, le soucis doit venir des markers qui sont sur les mêmes coordonnées gps.

J'ai donc essayé de mettre des clusters mais je me retrouve avec plus qu'un seul marker. Voici mon script javascript avec la fonction cluster :


 
<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 désolée, je n'ai pas l'habitude de demander de l'aide sur les forums, mais là je bloque carrément, même avec l'aide de mon avis Google

Merci beaucoup si vous avez quelques minutes pour m'aider Smiley smile