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.<\/p>\n\n\n\n
Prerequsites<\/strong><\/p>\n\n\n\n Database Structure<\/strong><\/p>\n\n\n\n WWW Structure<\/strong><\/p>\n\n\n\n GUI Page Code<\/strong><\/p>\n\n\n Posting data from an SQL server to a webpage using the Google Maps API is a lot simpler than you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-linux"],"_links":{"self":[{"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42"}],"version-history":[{"count":4,"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=\/wp\/v2\/posts\/42\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anthony.sleck.us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n<?php\n\/\/ database connection settings\n$servername = '********';\n$username = '********';\n$password = '********';\n$dbname = '*******';\n\n\/\/ create connection to database\n$conn = new mysqli($servername, $username, $password, $dbname);\n\n\/\/ check database connection\nif ($conn->connect_error) {\n die("Connection failed: " . $conn->connect_error);\n}\n\n\/\/ start node 1\n$query1 = "SELECT pt_id, lat, lng FROM node_test_1 WHERE node_id = 1 ORDER BY id DESC LIMIT 1";\n$result1 = $conn->query($query1);\n\nif ($result1->num_rows > 0) {\n $row = $result1->fetch_assoc();\n $latitude1 = $row['lat'];\n $longitude1 = $row['lng'];\n} else {\n echo "No data found";\n}\n\/\/ end node 1\n\n$conn->close();\n?>\n\n<!DOCTYPE html>\n<html>\n<head>\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <link rel="stylesheet" type="text\/css" href="style.css">\n <meta http-equiv="refresh" content="30">\n <title>Map | View<\/title>\n <script src="https:\/\/maps.googleapis.com\/maps\/api\/PASTE_YOUR_API_KEY_HERE&callback=initMap"\n async defer>\n <\/script>\n <script>\n function initMap() {\n var node1LatLng = {lat:<?php echo $latitude1; ?>, lng:<?php echo $longitude1; ?>};\n var map = new google.maps.Map(document.getElementById('map'),{\n zoom: 15,\n center: node1LatLng,\n mapTypeId: google.maps.MapTypeId.TERRAIN\n });\n\n mark = 'img\/mark1.png';\n var marker = new google.maps.Marker({\n position: node1LatLng,\n map: map,\n icon: mark,\n title: 'Node 1 Current GPS Position.',\n animation: google.maps.Animation.DROP\n });\n }\n <\/script>\n <\/head>\n<body>\n <nav>\n <ul>\n <p><li><a href="#"><img src="img\/logout.png"><\/a><\/li><\/P>\n <\/ul>\n <\/nav>\n <div>\n <p>This page Automatically refreshes every 30 seconds!<\/p>\n <\/div>\n\n <div class="outer-scontainer">\n <div class="row">\n <form class="form-horizontal" action="" method="post" name="frmCSVImport" id="frmCSVImport" enctype="multipart\/form-data">\n <\/form>\n <\/div>\n <div id="map" style="height: 600px; width: 100%;"><\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"