var addresses = [
['243, Dornacherstrasse', '26, Mattenstrasse'],
['48 av general de gaulle, saint louis', 'GründenstraÃe 40, Muttenz'],
['50 ackerstrasse , Basel', 'holeestrasse 133, Basel'],
['71 avenue de Bâle , Saint-Louis ', 'Leonhardstr 6, Basel'],
['Ackerstrasse 44, Basel', 'Petersplatz 1, Basel'],
['Ackerstrasse 51, Basel', 'Maiengasse 51, Basel '],
['Aeussere Baselstr. 255, Riehen', 'zu den drei Linden 80, Basel'],
['Aeussere Baselstrasse 309, Riehen', 'Gotthelfplatz 1, Basel'],
['Ahornstrasse 20, Basel', 'Viaduktstrasse , Basel'],
['Albert Schweitzer Strasse 10, Basel', 'Kohlenberg 17, Basel'],
['alemannengasse 17, Basel', 'Centrahlbahnplatz, Basel'],
['Alemannengasse 23, Basel', 'Peter Merian-Weg 8, Basel'],
['Allmendstrasse 233, Basel', 'Universitätsspital Basel, Basel '],
['Allmendstrasse 4, Basel', 'Petersplatz 1, Basel'],
['Allschwilerstrasse 106, Basel', 'Centralbahnstrasse 10 , Basel'],
['Allschwilerstrasse 116, Basel', 'Spitalstrasse 8, Architektur Institut, Basel '],
['Allschwilerstrasse 116, Basel', 'Steinenvorstadt 55, Kino Pathè Küchlin, Basel'],
['Allschwilerstrasse 48, Basel', 'Schneidergasse 28, Basel'],
['Altrheinweg 52, Basel', 'Vogesenplatz 1, Basel '],
['Am Rheinpark 6, Weil am Rhein', 'J. J. Balmer-Str. 3, Basel'],
['Am Weiher 15, Binningen', 'Klingelbergstrasse 82, Basel '],
['Amerbachstrasse, , Basel', 'Peter Merian-Weg, Basel'],
['Amerikanerstrasse 16, Binningen', 'Petersplatz 1, Basel'],
['Amselweg 20, Reinach', 'Baselstrasse 33, Münchenstein'],
['An der Auhalde 15, Riehen', 'Zu den Dreilinden 95, Basel'],
['arnikastr. 22, Riehen', 'marktplatz, Basel'],
['Auf der Lyss 14, Basel', 'Grenzstrasse 15, Basel']
];
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var bounds;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var basel = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: basel
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
bounds = new google.maps.LatLngBounds();
}
var delay = 100;
function calcRoute(start, end, next) {
console.log("calcRoute('" + start + "','" + end + "',next)");
var request = {
origin: start,
destination: end,
travelMode: 'BICYCLING'
};
directionsService.route(request,
function(result, status) {
if (status == 'OK') {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressBicyclingLayer: true,
suppressMarkers: true,
preserveViewport: true
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
bounds.union(result.routes[0].bounds);
map.fitBounds(bounds);
}
else {
console.log("status=" + status + " (start=" + start + ", end=" + end + ")");
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay += 100;
document.getElementById('delay').innerHTML = "delay between requests=" + delay;
} else {
var reason = "Code " + status;
var msg = 'start="' + start + ' end="' + end + '"" error=' + reason + '(delay=' + delay + 'ms)<br>';
document.getElementById("messages").innerHTML += msg;
}
}
next();
});
}
initialize();
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
console.log('call calcRoute("' + addresses[nextAddress][0] + '","' + addresses[nextAddress][1] + ') delay=' + delay);
setTimeout('calcRoute("' + addresses[nextAddress][0] + '","' + addresses[nextAddress][1] + '",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
theNext();
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="delay"></div>
<div id="map"></div>
<div id="messages"></div>