As someone who is new to JavaScript, I recently came across a question on Google Maps JS API v3 - Simple Multiple Marker Example and attempted to implement the solution provided by Daniel Vassallo.
var Australia = new google.maps.LatLng(-27.16881, 132.72259);
var placesIhaveBeen = [
['Aalborg Airport Flight leaves at:xxxxxx', 57.04807, 9.91857]
['Copenhagen Airport Arrives leaves at:xxxxxx', 55.61541, 12.64885]
['Dubai Airport Flight Arrives at: xxxxx', 25.25278, 55.36444]
['Sydney Airport Flight Arrives at:xxxxxx', -33.93947, 151.17522]];
var markers = [];
var iterator = 0;
var map;
var infowindows = new google.maps.InfoWindow();
var marker, i;
function initialize()
{
var mapOptions = {
zoom: 4,
center: Australia,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("googleMap-Canvas"),
mapOptions);
//flight path Polyline
var flightPlanCoordinates = [
new google.maps.LatLng(57.04807, 9.91857),
new google.maps.LatLng(55.61541, 12.64885),
new google.maps.LatLng(25.25278, 55.36444),
new google.maps.LatLng(-33.93947, 151.17522)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
//end of flight path polyline
for (i = 0; i < placesIhaveBeen.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placesIhaveBeen[i][1], placesIhaveBeen[i][2], placesIhaveBeen[i][3], placesIhaveBeen[i][4]),
map: map
});
google.maps.eve.addDomListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(placesIhaveBeen[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
That represents my entire Script, including some flight paths. I am seeking assistance in showcasing both the markers and the polyline simultaneously, as my current implementation seems to be falling short. Any help would be greatly appreciated :)