Q:

Google Maps Multiple Markers. What is wrong with my code?

So i have the code below. It doesn't show anything when i run it. Just a white blank page on a browser. It should be a googlemap with markers(multiple) on it. I want to know what is wrong with my code because it doesn't show any error at all.

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <?php include 'Location.php';?>
  
  <script type="text/javascript">
    var locations = <?php echo json_encode($location); ?>;

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

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

    var marker, i;

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

  loc_array = locations[i].split(",");

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

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
   return function() {
    infowindow.setContent(loc_array[0]);
    infowindow.open(map, marker);
   }
  })(marker, i));
    }
  </script>
</body>
</html>

and the Location.php file contains the following data:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tsunami_simulation";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

//========================================================
 $sql='SELECT a.Household_Name, b.Latitude, b.Longitude FROM household a, location b WHERE a.Household_ID = b.Household_ID;';
 $result = mysqli_query($conn, $sql);
  
 if(mysqli_num_rows($result) > 0){
  // output data of each row
  
  //while($row = mysqli_fetch_assoc($result)) {
        //echo "Household Name: " . $row["Household_Name"]. " - Latitude: " . $row["Latitude"]. " - Longitude " . $row["Longitude"] ."<br>";
  //}  
  for($i=0;$i<mysqli_num_rows ( $result );$i++){
   $row=mysqli_fetch_row($result);

   $location[]= $row[0].', '.$row[2].', '.$row[1].','.($i+1);
  }
  
 }else{echo "0 results";}
?>

A:

First of all you have syntax error right here 
var locations = <?php echo json_encode($location); ?>; 

Change it to 
var locations = "<?php echo json_encode($location); ?>";

After that you should have a string in locations variable so you have to create object 
locations = JSON.parse(locations)

I did this and seems to work
<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <?php 

    $locations[] = 'name,6.00,125.50';
    $locations[] = 'name,6.05,125.55';
    $locations[] = 'name,6.10,125.60';
    $locations[] = 'name,6.15,125.65';
    $locations[] = 'name,6.20,125.70';
    $locations[] = 'name,6.25,125.75';

    ?> 

  <script type="text/javascript">

    var locations = '<?php echo json_encode($locations); ?>';
    locations = JSON.parse(locations)

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

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

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

        loc_array = locations[i].split(",");

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

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(loc_array[0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
  </script>
</body>
</html>

