Query only returning one row (PHP / MYSQL)

Mack :

I have an issue when trying to return some rows using PHP within JavaScript...

When i echo the results as plain text it works fine.. however when i try to populate the map with the results it only shows one row/marker from the database and not the rest of the table

screenshot shows only one marker returning on map instead of all results from the database

here is the full code for the page..

            <?php include("header.php");

    // Connect to the hydrants table and set ORDER BY to ASC or DESC

    $sql = "SELECT id, lat, lng, flow, pressure, type, lid, updated FROM hydrants_OLD ORDER BY id ASC";
    $result = $conn->query($sql);

    // Display the results of the query

                        while($row = $result->fetch_assoc()) {   ;

                            ?>
            <head>
              <title>Hydrants</title>

              <meta name="viewport" content="initial-scale=1.0">
                  <link rel="Shortcut Icon" href=images/hl.png>
               <meta name="mobile-web-app-capable" content="yes">
               <link rel="icon" href="images/hl.png">
      <!--<meta name="apple-mobile-web-app-capable" content="yes">-->
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="apple-mobile-web-app-title" content="Hydrants">

      <link rel="apple-touch-icon" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/h-apple.png">
              <meta charset="utf-8">
              <style>
                /* Always set the map height explicitly to define the size of the div
                 * element that contains the map. */
                #map {
                  height: 100%;
                }
                /* Optional: Makes the sample page fill the window. */
                html, body {
                  height: 100%;
                  margin: 0;
                  padding: 0;
                }
              </style>
          </head>
          <body bgcolor="#ffffff">      

    <?php 
    $lat = $row['lat'];
    $lng = $row['lng'];
    $id = $row['id'];
    $flow = $row['flow'];
    $pressure = $row['pressure'];
    $type = $row['type'];
    $lid = $row['lid'];
    $updated = $row['updated'];
    ?>

            <?php echo $id, $lat, $lng, $flow, $pressure, $type, $lid, $updated, "<br>" ; } ?>


            <div id="map"></div>

            <script>

                var map, infoWindow;
                function initMap(){
                // Map options
                var options = {
                  // zoom:17,
                  zoom:14,
                  center: {lat: 53.428345, lng: -6.244447},
                }


                var map = new google.maps.Map(document.getElementById('map'), options);

                // Array of markers
                var markers = [


    // HYDRANTS

    { coords:{lat:<?php echo $lat ?>,lng:<?php echo $lng ?>}, iconImage:'images/hs.png', content:'<h2>Hydrant - Number <?php echo $id ?></h2><b>Flow</b> <?php echo $flow ?> Liters per minute<br><b>Pressure</b> <?php echo $pressure ?> bar<br><br><?php echo $type ?><br><?php echo $lid ?><br><br><center><a href=images/hydrants/<?php echo $id ?>.jpg><img src=images/hydrants/<?php echo $id ?>.jpg width=100%></a>Updated <?php echo $updated ?><br><br><a href="report.php?id=<?php echo $id ?>">Report problem with this hydrant</a></center>' }


                ];

                // Loop through markers
                for(var i = 0;i < markers.length;i++){
                  // Add marker
                  addMarker(markers[i]);
                }

                // Add Marker Function
                function addMarker(props){
                  var marker = new google.maps.Marker({
                    position:props.coords,
                    map:map,
                    //icon:props.iconImage
                  });

                  // Check for customicon
                  if(props.iconImage){
                    // Set icon image
                    marker.setIcon(props.iconImage);
                  }

                  // Check content
                  if(props.content){
                    var infoWindow = new google.maps.InfoWindow({
                      content:props.content
                    });
                         marker.addListener('click', function(){
                      infoWindow.open(map, marker);
                    });
                  }
                }

                  infoWindow = new google.maps.InfoWindow;

                }

              </script>
              <script async defer
              src="https://maps.googleapis.com/maps/api/js?key=0000MYAPIKEY0000&callback=initMap">
              </script>
            </body>

    <?php
    // Close database connection
    $conn->close();

    ?>

Claudio :

The problem is that you have html code inside the loop section, meaning you're creating a map for each coordinate. I think the best approach, considering your code, is to create an array of markers and then converting it to JSON using the json_encode method and printing it to a variable on your javascript code.

// Display the results of the query
$markers = [];

while($row = $result->fetch_assoc()) {
    $markers[] = [
        'coords' => [ 
            'lat' => $row['lat'],
            'lng' => $row['lng']
        ],
        'iconImage' => 'images/hs.png',
        'content' => "<h2>Hydrant - Number {$row['id']}</h2><b>Flow</b> {$row['flow']} Liters per minute<br><b>Pressure</b> {$row['pressure']} bar<br><br>{$row['type']}<br>{$row['lid']}<br><br><center><a href=images/hydrants/{$row['id']}.jpg><img src=images/hydrants/{$row['id']}.jpg width=100%></a>Updated {$row['updated']}<br><br><a href=\"report.php?id={$row['id']}\">Report problem with this hydrant</a></center>"
    ];
}

Then on your javascript, simply add a variable like this and print the encoded result:

var markers = <?php echo json_encode($markers); ?>;

The whole code:

<?php include("header.php");

// Connect to the hydrants table and set ORDER BY to ASC or DESC

$sql = "SELECT id, lat, lng, flow, pressure, type, lid, updated FROM hydrants_OLD ORDER BY id ASC";
$result = $conn->query($sql);

// Display the results of the query
$markers = [];

while($row = $result->fetch_assoc()) {
    $markers[] = [
        'coords' => [ 
            'lat' => $row['lat'],
            'lng' => $row['lng']
        ],
        'iconImage' => 'images/hs.png',
        'content' => "<h2>Hydrant - Number {$row['id']}</h2><b>Flow</b> {$row['flow']} Liters per minute<br><b>Pressure</b> {$row['pressure']} bar<br><br>{$row['type']}<br>{$row['lid']}<br><br><center><a href=images/hydrants/{$row['id']}.jpg><img src=images/hydrants/{$row['id']}.jpg width=100%></a>Updated {$row['updated']}<br><br><a href=\"report.php?id={$row['id']}\">Report problem with this hydrant</a></center>"
    ];

    // echo "{$row['id']}, {$row['lat']}, {$row['lng']}, {$row['flow']}, {$row['pressure']}, {$row['type']}, {$row['lid']}, {$row['updated']}, <br>" ;
}

?>
    <head>
      <title>Hydrants</title>

      <meta name="viewport" content="initial-scale=1.0">
          <link rel="Shortcut Icon" href=images/hl.png>
       <meta name="mobile-web-app-capable" content="yes">
       <link rel="icon" href="images/hl.png">
      <!--<meta name="apple-mobile-web-app-capable" content="yes">-->
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="apple-mobile-web-app-title" content="Hydrants">

      <link rel="apple-touch-icon" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/h-apple.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/h-apple.png">
      <meta charset="utf-8">
      <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
      </style>
  </head>
  <body bgcolor="#ffffff">      
    <div id="map"></div>

    <script>

        var map, infoWindow;
        function initMap(){
        // Map options
        var options = {
          // zoom:17,
          zoom:14,
          center: {lat: 53.428345, lng: -6.244447},
        }

        var markers = <?php echo json_encode($markers); ?>;

        var map = new google.maps.Map(document.getElementById('map'), options);

        // Loop through markers
        for(var i = 0;i < markers.length;i++){
          // Add marker
          addMarker(markers[i]);
        }

        // Add Marker Function
        function addMarker(props){
          var marker = new google.maps.Marker({
            position:props.coords,
            map:map,
            //icon:props.iconImage
          });

          // Check for customicon
          if(props.iconImage){
            // Set icon image
            marker.setIcon(props.iconImage);
          }

          // Check content
          if(props.content){
            var infoWindow = new google.maps.InfoWindow({
              content:props.content
            });
                 marker.addListener('click', function(){
              infoWindow.open(map, marker);
            });
          }
        }

          infoWindow = new google.maps.InfoWindow;

        }

      </script>
      <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=0000MYAPIKEY0000&callback=initMap">
      </script>
    </body>

<?php
// Close database connection
$conn->close();

?>