Добавление нескольких маркеров на Картах Google из базы данных MySQL

Я пытаюсь отобразить несколько маркеров на картах Google с использованием данных (lat и lng) из базы данных MySQL. Когда я запускаю цикл foreach для возврата этих маркеров на карту, он возвращает только последнюю строку. Что может быть проблемой?Добавление нескольких маркеров на Картах Google из базы данных 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);

Затем установите маркеры карты Google, используя маркеры переменной php.

<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

показывают вывод маркеров $ –

Добавление нескольких маркеров на Картах Google из базы данных MySQL

ответ

Смежные вопросы