Google Maps API with PHP and MySQL

asleck

Posting data from an SQL server to a webpage using the Google Maps API is a lot simpler than you may think. I am going to outline some of the things that I learned in getting this to all work.

Prerequsites

  • Please note that I am running Ubuntu Server 22.04 in a VM
    • Apache Server
    • MySQL Server
    • WebMin – Optional
    • MyPHPAdmin – Optional
    • Working knowledge of PHP, HTML, SQL

Database Structure

  • Database_name – dealers’ choice for database name
    • Database_table – dealers’ choice for table name
      • Columns
        • id
          • Type: int
          • Autoincrement
          • Primary
        • node_id
          • Type: int
        • pt_id
          • Type: int
        • lat
          • Type: decimal (30,6)
        • lng
          • Type: decimal (30,6)

WWW Structure

  • www root
    • img
      • icon1.png
      • mark1.png
      • Note that cons and mark should be roughly 96*96 pixels and can be anything you would like if it is a png with a transparent background.
    • index.php – dealers’ choice for page name

GUI Page Code

<?php
// database connection settings
$servername = '********';
$username = '********';
$password = '********';
$dbname = '*******';

// create connection to database
$conn = new mysqli($servername, $username, $password, $dbname);

// check database connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// start node 1
$query1 = "SELECT pt_id, lat, lng FROM node_test_1 WHERE node_id = 1 ORDER BY id DESC LIMIT 1";
$result1 = $conn->query($query1);

if ($result1->num_rows > 0) {
    $row = $result1->fetch_assoc();
    $latitude1 = $row['lat'];
    $longitude1 = $row['lng'];
} else {
    echo "No data found";
}
// end node 1

$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta http-equiv="refresh" content="30">
  <title>Map | View</title>
    <script src="https://maps.googleapis.com/maps/api/PASTE_YOUR_API_KEY_HERE&callback=initMap"
            async defer>
    </script>
    <script>
              function initMap() {
                var node1LatLng = {lat:<?php echo $latitude1; ?>, lng:<?php echo $longitude1; ?>};
                var map = new google.maps.Map(document.getElementById('map'),{
                  zoom: 15,
                  center: node1LatLng,
                  mapTypeId: google.maps.MapTypeId.TERRAIN
                });

                mark = 'img/mark1.png';
                var marker = new google.maps.Marker({
                  position: node1LatLng,
                  map: map,
                  icon: mark,
                  title: 'Node 1 Current GPS Position.',
                  animation: google.maps.Animation.DROP
                });
              }
    </script>
  </head>
<body>
  <nav>
    <ul>
      <p><li><a href="#"><img src="img/logout.png"></a></li></P>
    </ul>
  </nav>
  <div>
    <p>This page Automatically refreshes every 30 seconds!</p>
  </div>

  <div class="outer-scontainer">
    <div class="row">
      <form class="form-horizontal" action="" method="post" name="frmCSVImport" id="frmCSVImport" enctype="multipart/form-data">
      </form>
    </div>
    <div id="map" style="height: 600px; width: 100%;"></div>
</body>
</html>

Related Posts

Leave a Reply