Google Maps API flight Path in loop

[ln-asm]

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

[ln-asm]

I just found out that if I use the flightPath.setMap(map); before the mouseover/mouseout events, the flightpaths are actually drawn correctly on the map...it's in the mouseover/out events it won't work properly. Any ideas on how I could make this work properly?

Thanks!

Anders

[FSX30HD]

mouseovertxt is not declared like variable

initialize() is not defined

MY_MAPTYPE_ID is not defined

// Create info window. In content you can pass simple text or html code.
var infowindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth: 10
});

// Add listner for marker. You can add listner for any object. It is just an example in which I am specifying that infowindow will be open on marker mouseover
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
});

Regards Fred