SQLデータベースからGoogleマップマーカーを追加するには

Question

私はGoogleマップを持っています。データベースに追加する各要素（緯度と経度）に新しいマーカーを追加したいと思います。 これは私が行っていることではありません。 ありがとうございます。

<?php 
    $reponse = $bdd->query('SELECT * FROM zdou ORDER BY id '); 
    while ($donnees = $reponse->fetch()){ 

    ?> 
     <p> 
      <strong>latitude</strong> : <?php echo $donnees['latitude']; ?><br/> 
      <strong>longitude</strong> : <?php echo $donnees['longitude']; ?><br/> 
     </p> 
     <?php 
      $latitude = $donnees['latitude']; 
      $longitude = $donnees['longitude']; 
     ?> 
     <script> 
      latitude = <?php echo $latitude ?>; 
      longitude = <?php echo $longitude ?>; 
      marker = new google.maps.LatLng(latitude, longitude); 
      var placerMarker = new google.maps.Marker({position:marker,map:map,title:"Zdou"}); 
     </script> 
     <?php 
    } 
    $reponse->closeCursor(); 
     ?> 

そして、私はこのようなユーザの位置でマップを作成している：私はそれがしばらくの間「スクリプト」に入るたびに増分する変数を作成し ：

function showPosition(position) { 
      lat = position.coords.latitude; 
      lon = position.coords.longitude; 
      latlon = new google.maps.LatLng(lat, lon) 
      mapholder = document.getElementById('mapholder') 
      mapholder.style.height = '250px'; 
      mapholder.style.width = '500px'; 

      var myOptions = { 
      center:latlon,zoom:12, 
      mapTypeId:google.maps.MapTypeId.ROADMAP, 
      mapTypeControl:false, 
      navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
      } 
      var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); 
      var myPos = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 

     } 

EDITループし、その変数を表示します。 変数が未定義であるため、ループ内のスクリプトは読み込まれません。 まだヘルプが必要です。

Answer 1

マップ変数をグローバルにしてみてください。なぜなら、PHPループでマーカーを作成するときには定義されていないからです。

var map; 
function showPosition(position) { 
    lat = position.coords.latitude; 
    lon = position.coords.longitude; 
    latlon = new google.maps.LatLng(lat, lon) 
    mapholder = document.getElementById('mapholder') 
    mapholder.style.height = '250px'; 
    mapholder.style.width = '500px'; 

    var myOptions = { 
    center:latlon,zoom:12, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    mapTypeControl:false, 
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} 
    } 
    map = new google.maps.Map(document.getElementById("mapholder"), myOptions); 
    var myPos = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); 

} 

これを見て、同様https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/