Plusieurs maps sur la même page

Résolu

admindunet -

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

--
bah, à part le bricolage informatique, rien à ajouter :)

Afficher la suite

5 réponses

jordane45 Modérateur

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>

admindunet Auteur

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

jordane45 Modérateur

@admindunetmouais.
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>
?>

Réponse 2 / 5
admindunet Auteur
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
1. jordane45 Modérateur
  
  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

admindunet Auteur

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

jordane45 Modérateur
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 Auteur
quand je place ma fonction initmap avant la boucle php ça m'affiche l'erreur :
Uncaught ReferenceError: google is not defined at initMap
0
1. jordane45 Modérateur
  
  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 ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question

admindunet Auteur

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), {

jordane45 Modérateur

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

admindunet Auteur
@jordane45Merci beaucoup ceci fonctionne parfaitement :D
0

Plusieurs maps sur la même page

5 réponses

Discussions similaires

Newsletters