Dear FlightAware staff,
I am interested in using FlightXML API to show the real time flight location on a map.
I tried the example listed in the below page for REST / JSON using Javascript / jQuery.
Used the exact same code, just with my username and API key
flightaware.com/commercial/flig … t#examples
However I keep getting the following error for any flight I input
Failed to decode route: [object Object]
could you please advise what the problem is?
thank you so much for your help!
<html>
<head>
<!--
This example uses:
* the FlightXML2 FlightInfoEx and DecodeFlightRoute functions over REST:
http://flightaware.com/commercial/flightxml/
* Google Maps API:
http://code.google.com/apis/visualization/documentation/gallery/map.html
* jQuery, hosted by Google API
-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var fxml_url = 'http://YOUR_USERNAME:YOUR_API_KEY@flightxml.flightaware.com/json/FlightXML2/';
google.load("visualization", "1", {packages:"map"]});
// When the button is clicked, fetch the details about the entered flight ident.
$(document).ready(function() {
$('#go_button').click(function() {
$.ajax({
type: 'GET',
url: fxml_url + 'FlightInfoEx',
data: { 'ident': $('#ident_text').val(), 'howMany': 1, 'offset': 0 },
success : function(result) {
// display some textual details about the flight.
var flight = result.FlightInfoExResult.flights[0];
$('#results').html('Flight ' + flight.ident + ' from ' + flight.origin + ' to ' + flight.destination);
// display the route on a map.
fetchAndRenderRoute(flight.faFlightID);
},
error: function(data, text) { alert('Failed to fetch flight: ' + data); },
dataType: 'jsonp',
jsonp: 'jsonp_callback',
xhrFields: { withCredentials: true }
});
});
});
// Fetch the planned route for a specified flight_id.
function fetchAndRenderRoute(flight_id) {
$.ajax({
type: 'GET',
url: fxml_url + 'DecodeFlightRoute',
data: { 'faFlightID': flight_id },
success : function(result) {
// Initialize a data table using the Google API.
var table = new google.visualization.DataTable();
table.addColumn('number', 'Lat');
table.addColumn('number', 'Lon');
table.addColumn('string', 'Name');
// Insert all of the points into the data table.
var points = result.DecodeFlightRouteResult.data;
table.addRows(points.length);
for (rowid = 0; rowid < points.length; rowid++) {
table.setCell(rowid, 0, points[rowid].latitude);
table.setCell(rowid, 1, points[rowid].longitude);
table.setCell(rowid, 2, points[rowid].name + ' (' + points[rowid].type + ')' );
}
// Render the data table into a map using Google Maps API.
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(table, {showTip: true, showLine: true, lineWidth: 3, lineColor: '#009900'});
},
error: function(data, text) { alert('Failed to decode route: ' + data); },
dataType: 'jsonp',
jsonp: 'jsonp_callback',
xhrFields: { withCredentials: true }
});
}
</script>
</head>
<body>
<form onsubmit="return false;">
<p>Enter a flight ident to track:
<input type="text" name="ident" id="ident_text" value="COA423" />
<input type="submit" id="go_button" value="Go" />
</p>
</form>
<div id="results"></div>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>