How to access PHP variable ($sqldata – contains SQL table data) inside Javascript function?

  google-maps, html, javascript, php, sql

I’m writing a code that takes the top 10 rows from an SQL Table and shows them first in a table, and then plots a marker for each on the same GMaps (each row has latitude and longitude info).
I’m able to get the table part (display top 10 rows working), but I’m having a problem showing all 10 markers (10 rows = 10 markers) using the initMap() JS function.
I want to access the $sqldata variable which has the info of all the top 10 rows within the JS function and then work on that/iterate on that to place a marker for each row of info.
But I’m not able to access the $sqldata variable from inside the JS function. Can anyone help me with this? Thanks.

Code objective:
Fetch top 10 rows from SQL table.
Display top 10 rows info in CSS table on webpage.
Access same table data (top 10 rows) inside JS Maps function.
Iterate over each row, and plot a marker at the (lat,long) points in that row.

–Code–

<html lang="en">
<head>
    <style>
       /* Set the size of the div element that contains the map */
       #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="table_css_style.css">
    <title>ESP Data</title>
    <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
</head>


<body>
<div class="table-title">
<h3>Display Data from DB</h3>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">ID</th>
<th class="text-left">ESP-ID</th>
<th class="text-left">Reading Time</th>
<th class="text-left">Latitude</th>
<th class="text-left">Longitude</th>
<th class="text-left">Battery Level</th>
</tr>
</thead>
<tbody class="table-hover">

<?php>
include('dbconnect.php');
$sqlget = "SELECT * FROM `Data` LIMIT 10"; 
$sqldata = mysqli_query($dbcon, $sqlget) or die ('error while fetching data');

while($row = mysqli_fetch_array($sqldata,MYSQLI_ASSOC)){
    $id = $row['ID'];
    $espid = $row['espid'];
    $reading_time = $row['Timestamp'];
    $latitude = $row['Latitude'];
    $longitude = $row['Longitude'];
    $battery_level = $row['Battery_Level'];
    echo "<tr><td class='text-left'>" .$id. "</td>";
    echo "<td class='text-left'>" .$espid. "</td>";
    echo "<td class='text-left'>" .$reading_time. "</td>";
    echo "<td class='text-left'>" .$latitude. "</td>";
    echo "<td class='text-left'>" .$longitude. "</td>";
    echo "<td class='text-left'>" .$battery_level. "</td></tr>";
}
?>
</tbody>
</table>

<h3>ESP location on Google Maps</h3>
    <!--The div element for the map -->
    <div id="map"></div>

<script type="text/javascript">
// Initialize and add the map
function initMap() {  
  // get table data
  var mapData = '<?php echo json_encode($sqldata);?>'; //TRIED THIS, DOESN'T SEEM TO WORK 
    
    
  //set center point
  var centerLocation = {lat: 36.7783, lng: -119.4179};

  //create new map at center point
  var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: centerLocation});

  for (var i=0; i< mapData.length; i++){
      
      //create marker at location from table
      var markerLocation = {lat: parseFloat(mapData[i][2]), long: parseFloat([i][3])};
      //place marker at that location
      var marker = new google.maps.Marker({position: markerLocation, map: map});
  }
}


</script>

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

</body>
</html>

Source: Ask PHP

LEAVE A COMMENT