Over the next few posts I’m going to talk about the process I went through to integrate the itinerary for our imminent round-the-world trip into the awesome web-site my wife has set up.
The initial approach I took was to use Google My Maps: this is a really cool tool for creating a custom map without any coding needed (yes, I know – that doesn’t sound like much fun :-). For instance, you can set up your placemarks and link them with a route, and when individual places are clicked it shows a nice sliding info panel.
I started out with creating individual routes between places, but then ended up creating a single one for the whole tour. As much as anything to see the total length: it showed we’ll be travelling upwards of 75,000 km! Crazy.
You can, of course, embed the created map into your website:
I like many of the aspects of My Maps, but ultimately wanted more control for this particular project. Part of this is about integrating live tracking data, which we’ll see in an upcoming post. So I exported the map to KML (there’s a layer of indirection you may need to overcome by then loading the embedded KML reference) and then renamed this to XML so that I could open it in Excel and easily copy & paste the placemark information.
I put the location data into an HTML page that includes some simple code to animate the addition of placemarkers and the links between them. Here’s the JavaScript code:
<html>
<head>
<style>
html,
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100%;
overflow: hidden;
float: left;
border: thin solid #333;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[ENTER_YOUR_KEY_HERE]&libraries=places&callback=initMap"></script>
<script type='text/javascript'>
var map;
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var stops = [
['Marin-Epagnier', 47.0091808, 7.0015896, 1],
['Washington', 38.9071923, -77.0368707, 2],
['New York', 40.7127837, -74.0059413, 3],
['West Hartford', 41.7620842, -72.7420151, 4],
['Boston', 42.3600825, -71.0588801, 5],
['Toronto', 43.653226, -79.3831843, 6],
['Bozeman', 45.6769979, -111.0429339, 7],
['Yellowstone National Park', 44.427963, -110.588455, 8],
['Grand Teton National Park', 43.7904282, -110.6817627, 9],
['Salt Lake City', 40.7607793, -111.8910474, 10],
['Bryce Canyon', 37.6283161, -112.1676947, 11],
['Zion National Park', 37.2982022, -113.0263005, 12],
['Las Vegas', 36.1699412, -115.1398296, 13],
['Death Valley', 36.5322649, -116.9325408, 14],
['Sequoia National Park', 36.4863668, -118.5657516, 15],
['Big Sur', 36.2704212, -121.807976, 16],
['Monterey', 36.6002378, -121.8946761, 17],
['San Francisco', 37.7749295, -122.4194155, 18],
['Lima', -12.0463667, -77.0427891, 19],
['Machu Picchu', -13.1631412, -72.5449629, 20],
['Cusco', -13.53195, -71.9674626, 21],
['São Paulo', -23.5505199, -46.6333094, 22],
['Rio de Janeiro', -22.9068467, -43.1728965, 23],
['Iguazu Falls', -25.695259, -54.4388549, 24],
['Córdoba', -31.4200833, -64.1887761, 25],
['Parque Nacional Talampaya', -29.8906226, -67.853468, 26],
['Valle de la Luna', -22.9257639, -68.2879926, 27],
['Catamarca', -28.469581, -65.7795441, 28],
['San Miguel de Tucumán', -26.8082848, -65.2175903, 29],
['Salta', -24.7821269, -65.4231976, 30],
['Salar de Uyuni', -20.1595348, -67.4054025, 31],
['San Pedro de Atacama', -22.9087073, -68.1997156, 32],
['Pan de Azúcar National Park', -26.177565, -70.5495396, 33],
['Raúl Marine Balmaceda', -29.9695076, -71.3416309, 34],
['Santiago', -33.4378305, -70.6504492, 35],
['Easter Island', -27.112723, -109.3496865, 36],
['Tahiti', -17.6509195, -149.4260421, 37],
['Auckland', -36.8484597, 174.7633315, 38],
['Rotorua', -38.1368478, 176.2497461, 39],
['Wellington', -41.2864603, 174.776236, 40],
['Paparoa National Park', -42.1632433, 171.366731, 41],
['Queenstown', -45.0311622, 168.6626435, 42],
['Sydney', -33.8688197, 151.2092955, 43],
['Brisbane', -27.4697707, 153.0251235, 44],
['Cairns', -16.9185514, 145.7780548, 45],
['Kuala Lumpur', 3.139003, 101.686855, 46],
['Singapore', 1.352083, 103.819836, 47],
['Coimbatore', 11.0168445, 76.9558321, 48],
['Kodaikanal', 10.2381136, 77.4891822, 49],
['Bangalore', 12.9715987, 77.5945627, 50],
['Durban', -29.8586804, 31.0218404, 51],
['Lesotho', -29.609988, 28.233608, 52],
['Addo Elephant National Park', -33.4833333, 25.75, 53],
['Tsitsikamma', -32.2178721, 26.5772048, 54],
['Knysna', -34.0350856, 23.0464693, 55],
['Oudtshoorn', -33.6007225, 22.2026347, 56],
['Franschhoek', -33.8974833, 19.1523292, 57],
['Stellenbosch', -33.9321045, 18.860152, 58],
['Cape Town', -33.9248685, 18.4240553, 59]
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(15, -30),
zoom: 2,
mapTypeId: 'satellite'
});
setMarkers(map);
}
function setMarkers(map) {
// Adds markers to the map with a delay
var delay = 100;
for (var i = 0; i <= stops.length; i++) {
var timeout = i * delay;
// If this is the last segment, just add the line
if (i === stops.length) {
addConnectingLineWithTimeout(stops[i - 1], stops[0], timeout + delay);
} else if (i >= 0) {
// Otherwise add a marker after a delay, followed by the
// connecting line to the previous marker, if there is one
addMarkerWithTimeout(stops[i], timeout);
if (i > 0) {
addConnectingLineWithTimeout(stops[i], stops[i - 1], timeout + delay);
}
}
}
}
function addMarkerWithTimeout(stop, timeout) {
setTimeout(function() {
var marker = new google.maps.Marker({
map: map,
title: stop[0],
placeId: stop[1],
position: {
lat: stop[1],
lng: stop[2]
},
label: stop[3].toString(),
zIndex: stop[3]
//animation: google.maps.Animation.DROP, // Cool but too much
});
}, timeout);
}
function addConnectingLineWithTimeout(stop1, stop2, timeout) {
setTimeout(function() {
var flightPath = new google.maps.Polyline({
path: [{
lat: stop1[1],
lng: stop1[2]
}, {
lat: stop2[1],
lng: stop2[2]
}],
geodesic: true,
strokeColor: '#D34038',
strokeOpacity: 1.0,
strokeWeight: 4
});
flightPath.setMap(map);
}, timeout);
}
</script>
</body>
</html>
Here’s the embedded map:
In case you missed it, as this page loaded, here’s the animation of the route creation:
For fun, here’s one last (ultimately aborted) attempt, using a bounce animation to add the various markers. I decided it was just a little too much.
Next time we’re going to add some code that shows a picture in an information window when a placemark is clicked.
