複数のマーカーをMySQLデータベースから追加する

MySQLデータベースからのデータ（latおよびlng）を使用してGoogleマップに複数のマーカーを表示しようとしています。マップ上でこれらのマーカーを返すためにforeachループを実行すると、最後の行だけが返されます。何が問題なのでしょうか？複数のマーカーをMySQLデータベースから追加する

<?php 
require_once "db/db_handle.php"; 
$select = "SELECT * FROM map"; 
$data = $db->query($select); 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #map { 
     height: 400px; 
     width: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <h3>My Google Maps Demo</h3> 
    <div id="map"></div> 
    <?php foreach ($data as $key) { 
     echo $key['lat']; 
    ?> 
    <script> 
     function initMap() { 
     var uluru = {lat: <?php echo $key['lat']; ?>, lng: <?php echo $key['lng']; ?>}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: uluru 
     }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
     var contentString = '<?php echo $key['address']; ?>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map, 
      title: 'Uluru (Address)' 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 
     } 
    </script> 
    <?php } ?> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"> 
    </script> 
    </body> 
</html>

出典

2017-02-07 radioactive

あなたはスクリプト全体を含めているループ内すなわち毎回ループが実行されたマップの新しいインスタンスが生成されますどのようにループ –

の内側ループとちょうどマーカー外に地図を動かします私はそれをしますか？ – radioactive

すべての緯度と経度を取得するのは非常に簡単です。

require_once "db/db_handle.php"; 
$select = "SELECT * FROM map"; 
$data = $db->query($select); 
foreach ($data as $key) 
      $locations[]=array('name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng']); 
} 
/* Convert data to json */ 
$markers = json_encode($locations);

次に、php変数マーカーを使用してGoogleマップマーカーを設定します。

<script type='text/javascript'> 
     <?php 
      echo "var markers=$markers;\n"; 

     ?> 
    function initMap() { 

      var latlng = new google.maps.LatLng(-33.92, 151.25); // default location 
      var myOptions = { 
       zoom: 10, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false 
      }; 

      var map = new google.maps.Map(document.getElementById('map'),myOptions); 
      var infowindow = new google.maps.InfoWindow(), marker, lat, lng; 
      var json=JSON.parse(markers); 

      for(var o in json){ 

       lat = json[ o ].lat; 
       lng=json[ o ].lng; 
       name=json[ o ].name; 

       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(lat,lng), 
        name:name, 
        map: map 
       }); 
       google.maps.event.addListener(marker, 'click', function(e){ 
        infowindow.setContent(this.name); 
        infowindow.open(map, this); 
       }.bind(marker)); 
      } 
     }

全体のコードは次のようになります。

require_once "db/db_handle.php"; 
    $select = "SELECT * FROM map"; 
    $data = $db->query($select); 
    foreach ($data as $key) 
       $locations[]=array('name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng']); 
    } 
    /* Convert data to json */ 
    $markers = json_encode($locations); 
    ?> 
    <!DOCTYPE html> 
    <html> 
     <head> 
     <style> 
      #map { 
      height: 400px; 
      width: 100%; 
      } 
     </style> 
     </head> 
     <body> 
     <h3>My Google Maps Demo</h3> 
     <div id="map"></div> 
     <script type='text/javascript'> 
     <?php 
      echo "var markers=$markers;\n"; 

     ?> 

     function initMap() { 

      var latlng = new google.maps.LatLng(-33.92, 151.25); // default location 
      var myOptions = { 
       zoom: 10, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: false 
      }; 

      var map = new google.maps.Map(document.getElementById('map'),myOptions); 
      var infowindow = new google.maps.InfoWindow(), marker, lat, lng; 
      var json=JSON.parse(markers); 

      for(var o in json){ 

       lat = json[ o ].lat; 
       lng=json[ o ].lng; 
       name=json[ o ].name; 

       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(lat,lng), 
        name:name, 
        map: map 
       }); 
       google.maps.event.addListener(marker, 'click', function(e){ 
        infowindow.setContent(this.name); 
        infowindow.open(map, this); 
       }.bind(marker)); 
      } 
     } 
     </script> 
     <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"> 
     </script> 
     </body> 
    </html>

出典

2017-02-07 07:49:32

地図上にマーカーが表示されていません。 – radioactive

は$ markerの出力を示します –

複数のマーカーをMySQLデータベースから追​​加する

答えて

関連する問題

複数のマーカーをMySQLデータベースから追加する