Plusieurs maps sur la même page

Résolu
admindunet Messages postés 127 Date d'inscription   Statut Membre Dernière intervention   -  
admindunet Messages postés 127 Date d'inscription   Statut Membre Dernière intervention   -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 127 Date d'inscription   Statut Membre Dernière intervention   1
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > admindunet Messages postés 127 Date d'inscription   Statut Membre Dernière intervention  
 
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 127 Date d'inscription   Statut Membre Dernière intervention   1
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 127 Date d'inscription   Statut Membre Dernière intervention   1
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 127 Date d'inscription   Statut Membre Dernière intervention   1
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 127 Date d'inscription   Statut Membre Dernière intervention   1
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  
<!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 127 Date d'inscription   Statut Membre Dernière intervention   1 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Merci beaucoup ceci fonctionne parfaitement :D
0

Discussions similaires

imprimer plusieurs fois la meme photos sur la meme page
gaoule73 -
bertvert2 -

14 réponses
Code erreur 80710A06
LeJoeurTriste -
Petibond -

27 réponses