複数のマーカーがphpとmysqlのgooglemapsにある

Question

私はgooglemapsに複数のマーカーを作成し、データベースからデータを取得しようとします。 これは私のコード

<script> 
<?php 


$query = $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0'); 
    while($row = $query->fetch()){        

           $nama_kabkot = $row[nama_kabkot]; 
           $longitude = $row[longitude];        
           $latitude = $row[latitude]; 


?> 
     var markers = [ 
         [<?= $nama_kabkotv ?>, <?= $latitude ?>, <?= $longitude ?>] 
]; 
<?php } ?> 

function initMap() { 
    var latlng = new google.maps.LatLng(-33.92, 151.25); 
    var myOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
    }; 
    var map = new google.maps.Map(document.getElementById("peta"),myOptions); 
    var infowindow = new google.maps.InfoWindow(), marker, i; 
    for (i = 0; i < markers.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(markers[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
} 
</script> 

である。しかし、このコードは、データベースから一つの値を示しています。 データベースで複数のマーカーを表示するにはどうすればよいですか？

Answer 1

初期のSQLクエリは1=1による冗長where句がありますが、私はテストのためであると仮定します。元のコードのmarkers変数はループを介して各繰り返しで上書きされるため、配列には1つの項目しかありません。

<?php 
    /* lat/lng data will be added to this array */ 
    $locations=array(); 
    $query = $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0'); 
     while($row = $query->fetch()){ 

      $nama_kabkot = $row['nama_kabkot']; 
      $longitude = $row['longitude'];        
      $latitude = $row['latitude']; 

      /* Each row is added as a new array */ 
      $locations[]=array('name'=>$nama_kabkot, 'lat'=>$latitudem, 'lng'=>$longitude); 
     } 
     /* Convert data to json */ 
     $markers = json_encode($locations); 
?> 
<script type='text/javascript'> 
    <?php 
     echo "var markers=$markers;\n"; 

    ?> 

    function initMap() { 

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

     var map = new google.maps.Map(document.getElementById("peta"),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> 

Answer 2

<script> 

    // The following example creates complex markers to indicate beaches near 
    // Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond 
    // to the base of the flagpole. 

    function initMap() { 


    var markerscenter = [ 
    ['Bondi Beach', -33.890542, 151.274856,], 
    ['Bondi Beach2', -33.90542, 151.2748,] 

    ]; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 10, 
     center: {lat:Number(markerscenter[0][0]), lng:Number(markerscenter[0][1])} 
    }); 

    setMarkers(map); 
    } 

    // Data for the markers consisting of a name, a LatLng and a zIndex for the 
    // order in which these markers should display on top of each other. 


    var markers = [ 
    ['Bondi Beach', -33.890542, 151.274856,], 
    ['Bondi Beach2', -33.90542, 151.2748,] 

    ];       
// Info Window Content 
var infoWindowContent = [ 
    'desc1','desc2' 

    ];    

    function setMarkers(map) { 

    var image = 'markeimage.png'; 



    var infoWindow = new google.maps.InfoWindow(), marker, i; 
    for (var i = 0; i < markers.length; i++) { 


     //var beach = beaches[i]; 
     var marker = new google.maps.Marker({ 
     position: {lat:Number(markers[i][0]), lng: Number(markers[i][1])}, 
     map: map, 
     icon: image, 

     }); 

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 

    } 
</script>