Jump to content

Google Maps API flight Path in loop


ln-asm

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...