Do not change map center or zoom level when rendering directions

Question

I want to have a large map of berlin from which you see multiple routes. Unfortunately a DirectionsRenderer zooms to the route so you have to manually zoom out again.

How do I avoid this behavior?

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
    }
];

routes.forEach(function(route) {
    new google.maps.DirectionsService().route(route, function(body) {
        var display = new google.maps.DirectionsRenderer();

        display.setMap(map);
        display.setDirections(body);
    });
});

http://jsfiddle.net/H3GE3/2/

possible duplicate of [Fit Bounds in Google Map Render Directions](http://stackoverflow.com/questions/14492233/fit-bounds-in-google-map-render-directions) — geocodezip, Aug 06 '13 at 16:40
possible duplicate of [Is there a way to override the Google Directions service zoom values?](http://stackoverflow.com/questions/10782218/is-there-a-way-to-override-the-google-directions-service-zoom-values) — John, May 28 '15 at 11:14

geocodezip · Accepted Answer · 2020-10-09T13:29:11.080

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>

score 0 · Answer 2 · answered Oct 09 '20 at 13:09

In my case, this worked for me:

  let directionsService = new google.maps.DirectionsService();
        // always pass the `preserveViewport` to maintain the zoom ratio when using directionsRenderer
       let directionsRenderer = new google.maps.DirectionsRenderer({map:this.map,preserveViewport: true});
        //store the request state in an object ` use 'google.maps.TravelMode.DRIVING' instead of 'DRIVING'`
        var request = {
          origin: {query:start},
          destination: {query:end},
          travelMode: google.maps.TravelMode.DRIVING,
        };
        directionsService.route(request, function (response, status) {
         directionsRenderer.setDirections(response);
          // const route = request.routes;
       })

i didn't have to pass the setMap method.

Do not change map center or zoom level when rendering directions

2 Answers2

Linked

Related