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>

More Related Contents:

Leave a Comment Cancel reply