Code for GPS Tracking with Google Maps & AJAX

March 15, 2008 - 4:42 pm No Comments

Over the past few months, my article on GPS Tracking with Google Maps & AJAX has received many hits and attracted a multitude of comments requesting that the code for it be made available. I apologize for the delay but I’ve been away on holiday and far away from my trusted laptop. Now that things are somewhat back to normal and I can spend hour upon hour on my laptop again, here is the code that so many of you have asked for. I hope it makes sense and that it helps you all with what you’re trying to achieve. Obviously I haven’t posted the entire HTML and PHP coz it’s not all relevant to the GPS plotting but I hope what I have posted gives ya’ll a general idea on how to solve this particular problem. I’m sure there are many different ways to do this but this was just one way that I tried.Please feel free to ask questions and I’ll try to answer as best as I can! :)

...

Within the head section of the page that contains the gps tracking map:

^?View Code JAVASCRIPT

<script language="JavaScript">
 
function setTimer() {
   window.setTimeout("show_data();",5000);
}
 
function show_data(){
   //Append the id (just a simple count) to the requestURL
   var requestURL = "http://www.sitename.com/getGpsPoints.php";
   var count = document.getElementById("counter").value;
   count = parseInt(count, 10);
   var queries = "?id=" + count;
   var url = requestURL + queries;
 
   //Increment the hidden counter variable
   document.getElementById("counter").value = count+1; 
 
   var request = GXmlHttp.create();
   request.open("GET", url, true);
 
   request.onreadystatechange = function() {
      if (request.readyState == 4) {
         var xmlDoc = request.responseXML;
         var markers = xmlDoc.documentElement.getElementsByTagName("marker");
 
         for (var i = 0; i < markers.length; i++) {
            var point = new GPoint(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
 
            // Draw the MapMarker
            var mapMarker = new GMarker(point);
            map.addOverlay(mapMarker);
         }
 
         // Recenter the map
         map.centerAtLatLng(point); 
      }
   }
 
   request.send(null);
 
   //Reset the timer so that the page keeps refreshing itself
   setTimer();
}
 
</script>

Within the body section of the page that contains the gps tracking map, right at the bottom just before the /body tag:

^?View Code JAVASCRIPT

<script language="JavaScript">
   var query = window.location.pathname;
   if (query == "/mapping/gps-tracking-with-google-maps--ajax") {
      var map = new GMap(document.getElementById("map"));
      mapSetup();
      setTimer();
   }
</script>

Separate PHP script that queries your database to retrieve the GPS points to plot:

^?View Code PHP

<?php
    header ("content-type: text/xml");
 
    $link = mysql_connect ("localhost", "username", "password");
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }
 
    mysql_select_db ("dbname");
 
    //If no search string is passed, then we can't search
    if(empty($_GET["id"])) {
        echo " ";
    } else {
        //Remove whitespace from beginning x%x% end of passed search.
        $search = trim($_GET["id"]);
 
        //Query the DB and store the result in a variable
        $query = mysql_query("SELECT * FROM gps WHERE id=".$search);
 
        //If no rows are found...
        if(mysql_num_rows($query) == 0) {
            echo " ";
        } else {
            //Stick the returned rows into a handy array for easy use
            $row = mysql_fetch_array($query) or die(mysql_error()); 
 
            //Write out XML using values returned by the query
            echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?><markers><marker lat=\"".$row["lat"]."\" lng=\"".$row["lng"]."\" /></markers>";
        }
    }
 
    mysql_close($link);
?>

Posted Coding, Technology |

CodeFrenzy

Pages