Plusieurs broches sur Google Maps

Question

J'essaie d'obtenir une carte pour avoir plusieurs broches. Ces emplacements sont chargés via une boucle while. La carte ne montre que l'emplacement initial.

echo " 
    <div class ='map' id ='map' style='border-style: solid; height:400px;'></div> 
"; 

echo " 
<div class='list-group'> 
"; 

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
    { 
     extract($row); 
     $new_lat = $row['gps_lat']; 
     $new_long = $row['gps_long']; 
     $distance_to_the_point = haversineGreatCircleDistance ($original_gps_lat, $original_gps_long, $new_lat, $new_long); 
     if ($distance_to_the_point <= $radius) 
     { 
     echo" 
     <script> 
      var longs = []; 
      var lats = []; 
      lats.push(".$row['gps_lat']."); 
      longs.push(".$row['gps_long']."); 
     </script>"; 

... Some logic code ...

echo "</div> 
<script> 
    function initialize() 
    { 
     myLatlng = new google.maps.LatLng(31.5852, -85.2308); 
     var mapOptions = { 
     zoom: 12, 
     center: myLatlng 
     }; 

     for (var i = 0; i < longs.length; i++) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lats[i], longs[i]), 
     map: map 
     }); 

     } 

     var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

</script>"; 

J'apprécie toute l'aide disponible. Je ne reçois aucune erreur dans le code et la console montre que les marqueurs obtiennent le bon long et lat. Ceci est codé en php et répercuté dans le DOM dans le navigateur à des fins de sécurité.

Answer 1

Vous devez initialiser votre variable map avant de l'utiliser pour créer les marqueurs.

proof of concept fiddle

extrait de code:

var longs = []; 
 
var lats = []; 
 
lats.push(31.5); 
 
longs.push(-85.2); 
 
lats.push(31.5852); 
 
longs.push(-85.2308) 
 

 
function initialize() { 
 
    myLatlng = new google.maps.LatLng(31.5852, -85.2308); 
 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: myLatlng 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    for (var i = 0; i < longs.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(lats[i], longs[i]), 
 
     map: map 
 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div class='map' id='map'></div> 
 
<div class='list-group'>