Desenho de polilinha que cresce à medida que o carro se move tirando dados do MySql e PHP na API do Google

Eu queria mostrar a polilinha no mapa do Google à medida que o carro se move com animação (como neste site: http://econym.org.uk/gmap/example_cartrip2.htm ) pegando dados do MySQL e PHP. Para isso, consultei o código do tutorial da API do Google Polyline . Eu também peguei dados para isso do meu SQL, que é o seguinte: .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() {}

arquivo .php:

<?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();

?>

Mas agora eu queria mostrar polilinha com animação, como mostra o 1º site de referências. Qualquer um pode me sugerir algumas referências ou me ajudar na mesma. Estou obtendo esse resultado que está correto, mas quero animação como em http://econym.org.uk/gmap/example_cartrip2.htm Espero que desta vez minha parte do título e da descrição seja entendida.

Nos documentos da API Javascriptpath do Google Maps para Polyline (observe a propriedade) :

A sequência ordenada de coordenadas da polilinha. Esse caminho pode ser especificado usando uma matriz simples de LatLngs ou um MVCArray of LatLngs. Observe que, se você passar uma matriz simples, ela será convertida em um MVCArray. A inserção ou remoção de LatLngs no MVCArray atualizará automaticamente a polilinha no mapa .

Sabendo disso, eu tentaria assim:

// 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.
}

Como uma reflexão tardia, cada pulso do GPS deve despachar um evento que você pode precisar / deseja gerenciar em dois locais. Primeiro, se você deseja armazenar as posições dos veículos indefinidamente, precisará coletá-las no servidor e enviá-las ao seu banco de dados. No entanto, se você deseja que um veículo desenhe uma linha enquanto viaja, pode manter essa funcionalidade no cliente.