[GIS] Drawing polyline that grows as the car moves by taking data from MySql and PHP in Google API

google mapsgoogle-maps-apiMySQLPHP

I wanted to show the polyline on google Map as car moves with animation (like in this site: http://econym.org.uk/gmap/example_cartrip2.htm) by taking data from MySQL and PHP. For that i refered the code from Google API tutorial Polyline. I have also taken data for this from my SQL which is as follow:
.html

function load() {
    var point;
                    var flightPlanCoordinates=new Array();
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(18.33, 73.55),
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                 },
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                }
            });

            downloadUrl("xmltry.php", function(data) {
        var xml = data.responseXML;

        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lon")));
            flightPlanCoordinates[i]=point;
          }
          var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

      });

        }

        function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }
    function doNothing() {}

.php file:

<?php
//require("phpsqlajax_dbinfo.php");
include 'common_db.inc';
// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server

$connection=mysql_connect ("$dbserver", "$dbuser", "$dbpass");
if (!$connection) {  die('Not connected : ' . mysql_error());} 

// Set the active MySQL database

$db_selected = mysql_select_db($dbname, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 

// Select all the rows in the markers table

$query = "SELECT  `lat`, `lon` FROM current_location Where Device_ID='HGS1005'";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);  
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lon", $row['lon']);  
  } 

echo $dom->saveXML();

?>

But now i wanted to show polyline with animation as show in 1st references site.Can any one suggest me some references or help me out in same.
I am getting this result which is correct but want animation in it as in http://econym.org.uk/gmap/example_cartrip2.htm
enter image description here
Hope this time my title and description part is understood.

Best Answer

From the Maps Javascript API docs for Polyline (note the path property):

The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map.

Knowing that, I'd try it like this:

// I assume you've got your GPS signal pumping updates to your client.
// Insert a new GPS point into your Polyline's point array.
function OnGpsPulse(newLat, newLon)
{
  // Insert a new point at the end of the LatLng Array.
  pointIndex = flightPlanCoordinates.length;      
  flightPlanCoordinates[pointIndex]=new google.maps.LatLng(newLat, newLon);

  // And the line should automatically update in the map.
}

As an afterthought, each GPS pulse should be dispatching an event that you may need/want to handle in two places. First, if you want to store vehicles' positions indefinitely, you'll need to collect them server-side and push them into your database. However, if you just want a vehicle to draw a line while it travels, you can keep that functionality in the client.

Related Question