Hello everybody
I'm currently trying to create a simple new live map and the map itself is more or less good to go, but I'd like to draw a flight path from the departure airport -> current position of the aircraft -> arrival airport when you take the mouse over a marker.
I have all the information needed, but for some reason the flight path won't be drawn correctly. If I have 2 or more aircraft on the map, it will only draw the path of one of the aircraft, regardless of which one you hover.
I don't really know Javascript too well, so I really hope someone in here will be able to help out
This is the code I have at this point:
var planes = [
['NAX932B', 59.32, 11.95, 0, 183, 60.1939, 11.1004, 55.6179, 12.656, '25000', '310', 'NAX106 - Anders Moen', 'LN-NOO', 'ENGM', 'EKCH', '106', 'Climbing', '00:42']
];
// planes 0 = flight number, 1 = latitude, 2 = longitude, 3 = counter, 4 = heading, 5 = dep airport latitude, 6 = dep airport longitude, 7 = arr airport latitude, 8 = arr airport longitude, 9 = altitude, 10 = speed, 11 = pilot, 12 = aircraft, 13 = dep ICAO, 14 = arr ICAO, 15 = clean pilot ID, 16 = phase of flight, 17 = EET
for (var i = 0; i < locations.length; i++) {
var planes = locations[i];
var hdg = planes[4];
var image = new google.maps.MarkerImage("http://www.virtualnorwegian.net/img/livemap/"+hdg+".png",null,new google.maps.Point(0,0),new google.maps.Point(15, 15),new google.maps.Size(30, 30));
var contentString = planes[0];
var infowindow = new google.maps.InfoWindow({content: contentString});
var quickinfowindow = new google.maps.InfoWindow({content: contentString});
var myLatLng = new google.maps.LatLng(planes[1], planes[2]);
var lat1 = planes[5]; var lat2 = planes[1]; var lat3 = planes[7];
var lng1 = planes[6]; var lng2 = planes[2]; var lng3 = planes[8];
// Aircraft on map
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
optimized: false,
internalid: planes[15],
zIndex: planes[3],
rotation: planes[4],
mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />EET: '+planes[17]
});
// Dep->plane->arr
var flightPlanCoordinates = [
new google.maps.LatLng(lat1, lng1),
new google.maps.LatLng(lat2, lng2),
new google.maps.LatLng(lat3, lng3)
];
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#c3524f",
strokeOpacity: 1.0,
strokeWeight: 2
});
// Mouseover
google.maps.event.addListener(marker, 'mouseover', function () {
quickinfowindow.setContent(this.mouseovertxt);
quickinfowindow.open(map, this);
flightPath.setMap(map);
});
// Mouseout
google.maps.event.addListener(marker, 'mouseout', function () {
quickinfowindow.close();
flightPath.setMap(null);
});
}
Like I wrote, everything here works fine, except the flight path when there are 2 or more aircraft on the map. I have searched and searched, and I've seen other people write that you need to clear the flightPlanCoordinates with flightPlanCoordinates = []; but this has not given me any other results.
Any ideas?
Thanks!
Anders