Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I wanted to show the polyline on google Map as car moves with animation (like in this site: 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(
          var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2




        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);
      };'GET', url, true);
    function doNothing() {}

.php file:

include '';
// 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)){  
  $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 enter image description here Hope this time my title and description part is understood.

share|improve this question

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.

share|improve this answer
Thanks for reply but, i will have data store in my database i.e.MySQL. I don't want live tracking but history of where my vehicle has moved, for that i wanted to show animation of track as in this example ( I wanted to add animation to stored data. where car image(i.e. png) will move and vehicle track will draw as this image move as in first link. – Pari Jul 24 '12 at 4:33

protected by whuber Aug 25 '13 at 15:46

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.