Sujet Précédent Sujet Suivant

Plusieurs maps sur la même page

Résolu/Fermé
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 - 10 mai 2021 à 16:51
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 - 11 mai 2021 à 17:55
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

A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mai 2021 à 17:16
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>

1
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 1
10 mai 2021 à 18:18
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>
?>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023
10 mai 2021 à 18:23
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>
?>
0
Réponse 2 / 5
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 1
Modifié le 10 mai 2021 à 19:05
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)

0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mai 2021 à 19:11
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..
0
Réponse 3 / 5
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 1
10 mai 2021 à 20:04
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 :)

0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mai 2021 à 20:17
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)
0
Réponse 4 / 5
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 1
10 mai 2021 à 20:25
quand je place ma fonction initmap avant la boucle php ça m'affiche l'erreur :
Uncaught ReferenceError: google is not defined at initMap
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mai 2021 à 21:25
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 1
10 mai 2021 à 21:39
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), {
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mai 2021 à 22:21 
<!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>
0
admindunet Messages postés 134 Date d'inscription mardi 1 septembre 2015 Statut Membre Dernière intervention 12 mars 2023 1 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
11 mai 2021 à 17:55
Merci beaucoup ceci fonctionne parfaitement :D
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses