谷歌地图显示多个位置（错误：locations [i]未定义）

I am trying to show multiple users location using Google Map API, I have to show all value from master_service_provider table for this I am using while loop.

But I am getting JavaScript error Type Error: locations[i] is undefined.

 <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>

It should be something like this, I think.

Fill the ... parts yourself, but keep the general structure of the code.

Let me know if you get it to work

<?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>