Use xmlhttp data for Google Maps api v3 polyline

Question

I use an xmlhttprequest to get coordinates out of a mysql database. This works with the following code:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://skyline-va.de/phpvms/lib/skins/crystal/mysql.php?id="+this.flightdetails.id,true);
xmlhttp.send();

Looking at the firebug console I see that this outputs the data in this format

new google.maps.LatLng(51.2848358165405, 6.77062893232108),
new google.maps.LatLng(51.2848358165405, 6.77062893232108),
new google.maps.LatLng(51.2848358165405, 6.77062893232108),
new google.maps.LatLng(51.2848358165405, 6.77062893232108),

and so on.
But how can I use this to display a polyline in Google Maps api? I've already tried searching google, unfortunately I couldn't find anything useful. I've also tried several things without success.

Thanks!

EDIT: Here is the map I am working on right now: http://skyline-va.de/phpvms/index.php/acars/viewmapbig
Basically what I want to do is if you click on one of the planes, the flightpath should be displayed as well. I have the coordinates stored in a database but I have to do the query after the plane is clicked.

EDIT2: I managed to output the data in xml format with the google documentary. But I can't get the code to work supplied by Google to display the data. I want to add every new point that comes through the for command to an array.

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

 request.open('GET', url, true);
 request.send(null);
}
 var flightPlanCoordinates = [
 ];
downloadUrl("http://skyline-va.de/phpvms/lib/skins/crystal/output-xml.php?id="+this.flightdetails.id, function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {

    flightPlanCoordinates.push(new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng"))));

  };
});
flightPath2 = new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2
            });
            flightPath2.setMap(map);

But that doesn't seem to work.

Answer 1

I've finally managed to get everything working now. The solution is this code:

var flightPlanCoordinates = [
 ];
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://skyline-va.de/phpvms/lib/skins/crystal/output-xml.php?id="+this.flightdetails.id,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
 var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
  flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}

flightPath2 = new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: "#04B431",
                strokeOpacity: 1.0,
                strokeWeight: 2
                });
            flightPath2.setMap(map);

Thanks to everyone who helped to solve this problem!

Answer 2

from your XHR data, I found the destination and source co-ordinates. I created an object out of it like this:

var flightPathCoords = [
    new google.maps.LatLng(48.6903, 9.19521),
    new google.maps.LatLng(32.0136, 34.8866),
];

and then created a poly object using the following properties

var flightPath = new google.maps.Polyline({
    path: flightPathCoords,
    geodesic: true,
    strokeColor: '#ffff00',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

and then bound this object to the map using :

 flightPath.setMap(map);

all you have to do now is to create a method and bind it to onclick of your flight, which would toggle the path or set it to null .

hope this helps.

EDIT

You could do something like this:

var paths = {};

xhr = function(){
    ....
    var flightData = response.responseText;
    ....
    paths[flightData.flightID] = new Array(flightData.coord1,flightData.coord2);
}

 populateMap = function(){
    ....
    var currentFlight = "ba057"; // get currentflight id
    currentCoords = paths.currentFlight;

    var flightPathCoords = [
        new google.maps.LatLng(currentCoords[0]),
        new google.maps.LatLng(currentCoords[1]),
    ];

    var flightPath = new google.maps.Polyline({
        path: flightPathCoords,
        geodesic: true,
        strokeColor: '#ffff00',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
 }