Do not change map center or zoom level when rendering directions
Use the preserveViewport option of the DirectionsRenderer to prevent the automatic zoom to the route, then set the viewport you like.
{preserveViewport: true}
Or if you want, calculate the union of the bounds of the directions responses, and fit the map to that.
var bounds = new google.maps.LatLngBounds();
routes.forEach(function(route) {
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer({preserveViewport: true});
display.setMap(map);
display.setDirections(body);
bounds.union(body.routes[0].bounds);
map.fitBounds(bounds);
});
});
proof of concept fiddle
code snippet:
var $canvas = document.querySelector('#map');
var map = new google.maps.Map($canvas, {
center: new google.maps.LatLng(52.46004869999999, 13.37898690),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 14
});
var routes = [{
origin: new google.maps.LatLng(52.459281, 13.356367),
destination: new google.maps.LatLng(52.455833, 13.322948),
travelMode: google.maps.TravelMode.BICYCLING
},
{
origin: new google.maps.LatLng(52.597621, 13.430536),
destination: new google.maps.LatLng(52.5918799, 13.2832929),
travelMode: google.maps.TravelMode.BICYCLING
}
];
var bounds = new google.maps.LatLngBounds();
routes.forEach(function(route) {
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer({
preserveViewport: true
});
display.setMap(map);
display.setDirections(body);
bounds.union(body.routes[0].bounds);
map.fitBounds(bounds);
});
});html,
body,
div#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>