Skip to content

Instantly share code, notes, and snippets.

@jashkenas

jashkenas/index.html

Last active December 21, 2015 22:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jashkenas/6378468 to your computer and use it in GitHub Desktop.
Save jashkenas/6378468 to your computer and use it in GitHub Desktop.
Download ZIP
The Grand (Road) Tour. 2013.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<meta charset="utf-8" />
<style>
#map-canvas {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script>
var locations = [
"Madrid, Spain",
"Granada, Spain",
"Mulhacén, Spain",
"Motril",
"Cabo Cope",
"Cartagena, Spain",
"Benidorm",
"Valencia, Spain",
"Peniscola",
"Barcelona",
"Arenys de Mar, Spain",
"Tossa de Mar",
"Baga",
"Gisclareny, Spain",
"Andorra la Vella",
"Pomas, France",
"Carcassonne, France",
"Marseillan Plage, France",
"Sete, France",
"Avignon",
"Cassis",
"Pointe de la Cacau, France",
"Ramatuelle, France",
"Saint Tropez",
"Agay, France",
"Cannes, France",
"Monaco",
"Finale Ligure",
"Genoa",
"Portofino",
"Lucca",
"Abetone, Italy",
"Sammommé, Pistoia, Italy",
"Florence",
"Bolzano, Italy",
"Malga Ciapela, BL, Italy",
"Marmolada, Italy",
"Cortina d'Ampezzo, BL, Italy",
"Tre Cime di Lavaredo, Italy",
"Strassen, Austria",
"Heilegenblut, Austria",
"Pasterze Glacier, Austria",
"Uttendorf, Austria",
"Unken, Austria",
"Schonau am Königsee, Germany",
"Reit im Winkl, Germany",
"Munich",
"Bad Elster",
"Dresden",
"Berlin",
"Dresden",
"Prague",
"Ceske Budejovice, Czech Republic",
"Dietach, Austria",
"Grossraming, Austria",
"Wagrain, Austria",
"Bramberg am Wildkogel, Austria",
"Krimml, Austria",
"Pettneu am Arlberg, Austria",
"Zernez, Switzerland",
"Swiss National Park, Switzerland",
"Tiefencastel, Switzerland",
"Gurtnellen-Dorf, Switzerland",
"Grächen, Switzerland",
"Les Crosets, Switzerland",
"Maillat, France",
"Nantua, France",
"St. Denis de Jouhet, France",
"Bordeaux, France",
"Vieux Boucau les Bains, France",
"Leitza, Spain",
"Zaldibia, Spain",
"Nanclares de la Oca, Spain",
"Espinosa de los Monteros, Spain",
"San Roque de Riomera, Spain",
"San Vincente de la Barquera, Spain",
"Ojedo, Spain",
"Fuente Dé, Cantabria, Spain",
"Villodrigo, Spain",
"Cantalejo, Spain",
"Sepulveda, Spain",
"Madrid, Spain"
];
var directionsService = new google.maps.DirectionsService();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(45.5, 0)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function getDirections(locs) {
var start = locs.shift();
var end = locs.pop();
locs = locs.map(function(loc) {
return {
location: loc,
stopover: true
};
});
var request = {
origin: start,
destination: end,
waypoints: locs,
optimizeWaypoints: false,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport: true,
suppressMarkers: true
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
}
});
}
for (var i = 0; i < locations.length; i += 9) {
getDirections(locations.slice(i, Math.min(i + 10, locations.length)));
}
new google.maps.Marker({
position: new google.maps.LatLng(40.40,-3.68),
map: map,
title: 'Madrid'
});
new google.maps.Marker({
position: new google.maps.LatLng(52.51,13.38),
map: map,
title: 'Berlin'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment