Google지도에 여러 위치가 표시됨 (오류 : locations [i]가 정의되지 않음)

Question

Google Map API를 사용하여 여러 사용자 위치를 표시하려고 할 때 master_service_provider 테이블의 모든 값을 루프를 사용하여 표시해야합니다.

JavaScript 오류가 발생합니다. 유형 오류 : locations [i]가 정의되지 않았습니다..

<div id="map"></div> 
     <script> 
      var map; 
      function initMap() { 
      var i = '0'; 
    <?php 
    $result=$conn->query("SELECT * FROM `master_service_provider`"); 

     $a=0; 
     while($row = mysqli_fetch_array($result)) { 
    $service_provider_id = $row['id']; 
       $fullname = $row['fullname']; 
      $fulladdress = $row['fulladdress']; 
       $phone = $row['phone']; 
        $lat = $row['lat']; 
        $lng = $row['lng']; 

    ?> 
    var <?php echo 's'.$phone; ?> = { 
       info: '<h3><?php echo $fullname; ?></h3>\ 
         <h4><?php echo $fulladdress; ?></h4>\ 
         <a href="view_service_provider.php?service_provider_id=<?php echo $service_provider_id; ?>">View Info</a>', 
         lat: <?php echo $lat; ?>, 
         long: <?php echo $lng; ?> 
     }; 


     var locations = [ 
      [<?php echo 's'.$phone; ?>.info, <?php echo 's'.$phone; ?>.lat, <?php echo 's'.$phone; ?>.long, <?php echo $a++; ?>], 
     ]; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)); 

     i++; 


    <?php } ?> 

     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 11, 
     center: new google.maps.LatLng(19.198313, 72.893533), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

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

     var marker; 


    } 

     </script> 

Answer 1

이렇게 생각해야합니다.

... 부분을 직접 채우지 만 코드의 일반적인 구조는 유지하십시오.

당신이

<?php 
... 
// do this on top, not in the middle of javascript 
$result = $conn->query("SELECT id, lat, lng, fullname, fulladdress, phone FROM master_service_provider"); // don't use *, specify the columns you want 

$mydata = array(); 
while($row = mysqli_fetch_assoc($result)) { // use _assoc rather than _array 
    $mydata[] = $row ; // push current row to the data object 
} 
// now we translate this php array to a javascript array of objects. 
// it should resemble something like: 
// var locations = [ {"id": "1", "lat":"4.51", "lng":"50.53", "fullname":"John Smith", ... }, {"id": "2", lat":"5.14", ...} ] ; 
// use json_encode() to realize this 

echo '<script>var locations = '. json_encode($mydata) .' ;</script>'; 
?> 

<script> 
    var map; 
    function initMap() { 

    ... 
    for(var i=0; i<locations.length; i++) { 

    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']), 
     title: locations[i]['fullname'], 
     map: map 
    }); 

    ... 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
     infowindow.setContent('phone: ' + locations[i]['phone']); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 
    ... 

    } 
</script>