Google Maps API V3 and Airline Route Map - api

Question

I'm trying to create an interactive route map like the ones airlines have and I'm using Google Maps API v3. I was able to put markers on the map for outstations and different markers for hubs. I've searched extensively to understand how I should create the lines, where the user clicks a hub and lines are drawn to the destinations. It would also have to draw a line back to the hub(s) if the user clicks an outstation. Any help and/or direction would be greatly appreciated! Here's my code with only some of the outstations and hubs.
<script>
var outstations = [
[37.618972, -122.374889, "SFO" ],
[37.3626, -121.929022, "SJC" ],
[23.15185, -109.721044, "SJD" ],
[9.993861, -84.208806, "SJO" ],
[17.311194, -62.718667, "SKB" ],
[17.701889, -64.798556, "STX" ],
[38.695417, -121.590778, "SMF" ],
];
var hubs = [
[39.0488367, -84.6678222, "Cincinnati/N. KY Int'l Airport" ],
[35.8776389, -78.7874722, "Raleigh-Durham Int'l Airport" ],
[36.0800556, -115.1522500, "Las Vegas/McCarran Int'l Airport" ],
[18.4393987, -66.0021348, "San Juan Luis Munoz Marin Int'l Airport" ],
];
function initialize()
{
var map = new google.maps.Map(document.getElementById("map_canvas"),{
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
mapTypeId: google.maps.MapTypeId.HYBRID
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var a in outstations) {
var b = outstations[a];
var latlng = new google.maps.LatLng(b[0], b[1]);
bounds.extend(new google.maps.LatLng(37.579407, -95.624995));
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_purple.png',
title: b[2]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
for (var c in hubs) {
var d = hubs[c];
var latlng = new google.maps.LatLng(d[0], d[1]);
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
map: map,
icon: 'http://maps.google.com/mapfiles/kml/pal2/icon56.png',
title: d[2]
});
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
if (map.getZoom() > 16) map.setZoom(4);
google.maps.event.removeListener(listener);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

It should be something like this.
(Please answer my questions in the comment under your post, if the script does not behave exactly as you need it to)
EDIT: Now it also connects a few outstations to other outstations
var hubMarkers = [];
var outstationMarkers = [];
var flightLines = [];
var outstations = [
[37.618972, -122.374889, "SFO" ],
[37.3626, -121.929022, "SJC" ],
[23.15185, -109.721044, "SJD" ],
[9.993861, -84.208806, "SJO" ],
[17.311194, -62.718667, "SKB" ],
[17.701889, -64.798556, "STX" ],
[38.695417, -121.590778, "SMF" ],
];
var hubs = [
[39.0488367, -84.6678222, "Cincinnati/N. KY Int'l Airport" ],
[35.8776389, -78.7874722, "Raleigh-Durham Int'l Airport" ],
[36.0800556, -115.1522500, "Las Vegas/McCarran Int'l Airport" ],
[18.4393987, -66.0021348, "San Juan Luis Munoz Marin Int'l Airport" ],
];
var hubConnections = [
[], // Cincinnati, no connections to outstations
[],
[0, 1, 2, 6], // Vegas, connected with SFO, SJC, ...
[3, 4, 5]
];
var outstationConnections = [
[1, 6], // SFO, connections to outstations SJC & SMF
[0], // SJC, connection to outstation SFO
[], // SJD
[], // SJO
[5], // SKB, connection to outstation STX
[4], // STX, connection to outstation SKB
[0], // SMF, connection to outstation SFO
];
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
mapTypeId: google.maps.MapTypeId.HYBRID
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var a in outstations) {
var b = outstations[a];
var latlng = new google.maps.LatLng(b[0], b[1]);
bounds.extend(new google.maps.LatLng(37.579407, -95.624995));
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_purple.png',
title: b[2]
});
google.maps.event.addListener(marker, 'click', function() {
// clear all previous lines
for (var i=0; i<flightLines.length; i++) {
flightLines[i].setMap(null);
}
var index = outstationMarkers.indexOf(this);
for (i=0; i<hubConnections.length; i++) {
if ( hubConnections[i].indexOf(index) > -1 ) { // if the index of the outstation Marker is found in the connections of that hub
var flightPath = new google.maps.Polyline({
path: [new google.maps.LatLng(hubs[i][0], hubs[i][1]), new google.maps.LatLng(outstations[index][0], outstations[index][1])],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
flightLines.push(flightPath);
}
}
// now we add the connections of this outstation to other outstations
for (i=0; i<outstationConnections.length; i++) {
if ( outstationConnections[i].indexOf(index) > -1 ) { // if the index of the outstation Marker is found in the connections of that hub
var flightPath = new google.maps.Polyline({
path: [new google.maps.LatLng(outstations[i][0], outstations[i][1]), new google.maps.LatLng(outstations[index][0], outstations[index][1])],
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
flightLines.push(flightPath);
}
}
});
outstationMarkers.push(marker);
}
for (var c in hubs) {
var d = hubs[c];
var latlng = new google.maps.LatLng(d[0], d[1]);
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
map: map,
icon: 'http://maps.google.com/mapfiles/kml/pal2/icon56.png',
title: d[2]
});
google.maps.event.addListener(marker, 'click', function() {
// clear all previous lines
for (var i=0; i<flightLines.length; i++) {
flightLines[i].setMap(null);
}
var index = hubMarkers.indexOf(this);
// line to all the connected outstations
for (i=0; i<hubConnections[index].length; i++) {
var flightPath = new google.maps.Polyline({
path: [
new google.maps.LatLng(hubs[index][0], hubs[index][1]),
new google.maps.LatLng(outstations[ hubConnections[index][i] ][0], outstations[ hubConnections[index][i] ][1])
],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
flightLines.push(flightPath);
}
// line to all hubs
for (i=0; i<hubs.length; i++) {
if (i != index) {
var flightPath = new google.maps.Polyline({
path: [
new google.maps.LatLng(hubs[index][0], hubs[index][1]),
new google.maps.LatLng(hubs[i][0], hubs[i][1])
],
geodesic: true,
strokeColor: '#00FF00',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
flightLines.push(flightPath);
}
}
});
hubMarkers.push(marker);
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
if (map.getZoom() > 16) {
map.setZoom(4);
}
google.maps.event.removeListener(listener);
});
}
google.maps.event.addDomListener(window, 'load', initialize);