Plusieurs maps sur la même page [Résolu]

Signaler
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021
-
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021
-
Bonjour,
Dans une page j'essai d'afficher plusieurs maps, le problème est que seule la dernière map dans le dernier div s'affiche.
Voici mon code :


$x = $info['gps']; // info gps contient 43.38763011826848, 4.595781904523042
list($y, $h) = explode(', ', $x);

if($i<5){

echo '<div id="map-'.$info['id'].'" style="height: 300px;"></div>
<script>
function initMap(){
var uluru = {lat: '.$y.', lng: '.$h.'};
var map = new google.maps.Map(document.getElementById(\'map-'.$info['id'].'\'), {
zoom: 13,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>';
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M&callback=initMap">
</script>
?>



Pouvez vous m'aider svp ?
Merci.

Configuration: Windows / Chrome 90.0.4430.93

5 réponses

Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 555
Bonjour,

Je suppose que tu as ce bout de code dans une boucle PHP
Et là.. tel que tu l'as écrit.. tu as plusieurs fois une fonction initmap .... que tu déclenches ensuite je ne sais où...

En gros,
Il faut sortir cette fonction de la boucle, et lui passer en paramètres les variables.

Un truc du genre
// début de ta boucle ....
// ...

   $x = $info['gps']; // info gps contient 43.38763011826848, 4.595781904523042
   list($y, $h) = explode(', ', $x);

  if($i<5){
      echo '<div id="map-'.$info['id'].'" style="height: 300px;"></div>
      <script>   initMap("map-'.$info['id'].'",'.$y.','.$h.'); </script>';  
  }

   
} // fin de ta boucle   
?>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M&callback=initMap">
</script>
<script>
  function initMap(id, y ,h){
    var uluru = {lat: y, lng: h};
    var map = new google.maps.Map(document.getElementById(id), {
      zoom: 13,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

merci @jordane45, sinon, c'est possible de garder le tout et à chaque fois dans la boucle changer le nom de la fonction, genre : function initMap'.$info['id'].'(){



$x = $info['gps']; // info gps contient 43.38763011826848, 4.595781904523042
list($y, $h) = explode(', ', $x);

if($i<5){

echo '<div id="map-'.$info['id'].'" style="height: 300px;"></div>
<script>
function initMap'.$info['id'].'(){
var uluru = {lat: '.$y.', lng: '.$h.'};
var map = new google.maps.Map(document.getElementById(\'map-'.$info['id'].'\'), {
zoom: 13,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>';
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M&callback=initMap">
</script>
?>
Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 555 >
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

mouais.
Un truc du genre

    $x = $info['gps']; // info gps contient 43.38763011826848, 4.595781904523042
    list($y, $h) = explode(', ', $x);

if($i<5){

    echo '<div id="map-'.$info['id'].'" style="height: 300px;"></div>
        <script>
          function initMap'.$info['id'].'(){
            var uluru = {lat: '.$y.', lng: '.$h.'};
            var map = new google.maps.Map(document.getElementById(\'map-'.$info['id'].'\'), {
              zoom: 13,
              center: uluru
            });
            var marker = new google.maps.Marker({
              position: uluru,
              map: map
            });
          }
        </script>';
}
	<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M&callback=initMap<?php echo $info['id'];?>">
    </script>
?>
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

Merci, effectivement ceci marche, les maps s'affichent, sauf que on peut manipuler uniquement la dernière, les autres seul la maps s'affiche avec l'endroit mais sans le marqueur et on ne peux pas naviger dessus



Pour info, j'ai du ajouter

	<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M&callback=initMap<?php echo $info['id'];?>">
</script>

dans la boucle car dans mon code $info['id'] change selon le $i (j'ai simplifié le code ici)

Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 555
Et oui... comme l'indique le message d'erreur.. le souci c'est que tu charges plusieurs fois le script map.js

La meilleur solution, c'est de faire comme je te l'avais indiqué au début..
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

D'accord, voilà je viens de faire votre première solution, voici ce que donne le code source de la page une fois affichée :


<div id="map-6" style="height: 300px;"></div>
<script>initMap("map-6",43.38763011826848,4.595781904523042); </script>


<script>
function initMap(id, y ,h){
var uluru = {lat: y, lng: h};
var map = new google.maps.Map(document.getElementById(id), {
zoom: 13,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M&callback=initMap">
</script>


le problème est que la carte ne s'affiche pas, et la console m'affiche :
Uncaught ReferenceError: initMap is not defined

Merci pour votre aide :)

Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 555
Ah oui.
Soit tu place la fonction initmap pas avant ta boucle PHP.
Soit tu mets dans le code qui fais appel à cette fonction dans ta boucle, le code javascript à l'intérieur d'un bloc document ready
(Tu trouveras sans mal sur internet des exemples de jQuery pour cette fonction)
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

quand je place ma fonction initmap avant la boucle php ça m'affiche l'erreur :
Uncaught ReferenceError: google is not defined at initMap
Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 555
Oui je pense qu'il faut également mettre l'appel au script Google maps avant la fonction c'est un tout ce qu'il faut déplacer
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

effectivement, en mettant le script initmap tout en haut avec la function, la dernière map s'affiche et la pramière map ne s'affiche pas et affiche l'erreur :
Uncaught ReferenceError: google is not defined at initMap
et la ligne est :
var map = new google.maps.Map(document.getElementById(id), {
Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021
3 555
<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>

</head>
<body>
  <script  defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBqFjwo8LqJFblhHhxpnYr11k0SEE0zj2M"></script>

        <script>
    
            function initMap(id, y ,h){
              var uluru = {lat: y, lng: h};
              var map = new google.maps.Map(document.getElementById(id), {
                zoom: 13,
                center: uluru
              });
              var marker = new google.maps.Marker({
                position: uluru,
                map: map
              });
            }
   
        </script>

   
    <div id="map-6" style="height: 300px;"></div>
    <script>
      $(document).ready(function(){
        initMap("map-6",43.38763011826848,4.595781904523042); 
      });
    </script>
</body>
</html>

Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021
>
Messages postés
32938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juin 2021

Merci beaucoup ceci fonctionne parfaitement :D