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")
Jusqu'ici tout fonctionne, le tableau json généré est correct :
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 :
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 :
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
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