How to disable map zooming after rendering driving directions?

Question

Like title says - I want to avoid map zooming after rendering directions. I found here a lot of about it, for example Do not change map center or zoom level when rendering directions, but after adding {preserveViewport: true} to DirectionsRenderer nothing happens. I don't want to calculate the union of the bounds of the directions responses, but only 'freeze' while rendering directions. What am I doing wrong?

My map: https://jsfiddle.net/harlowpl/xawy71r0/33/

              infoWindow = new google.maps.InfoWindow();
              directionsService = new google.maps.DirectionsService();
              directionsDisplay = new google.maps.DirectionsRenderer({
              map: map,
              preserveViewport: true,
              markerOptions: {
              visible: false
              }
              });

              createSourceMarker();
              createDestinationMarkers();
              }

              function markerClicked(destinationLocation) {
              var directionsRequest = {
              origin: sourceLocation,
              destination: destinationLocation,
              travelMode: 'DRIVING'
              };

              directionsService.route(directionsRequest, handleDirectionResults);
              }

              function handleDirectionResults(result, status) {
              if (status === 'OK') {
              directionsDisplay.setDirections(result);
              } else {
              console.log(status);
              }
              }
              }
              });

score 0 · Accepted Answer · answered Sep 19 '19 at 14:54

You have the zoom level set to a non-integer value. It is changing to an integer value when the directions result is displayed.

Hidden away in the documentation, it says: Specify zoom level as an integer.

proof of concept fiddle (setting zoom to 16, rather than 15.5)

code snippet:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<div id="map"></div>
<script>
  var sourceLocation = {
    lat: 52.340822,
    lng: 16.855841
  };
  var destinationLocations = [{
      lat: 52.344583,
      lng: 16.849864
    },
    {
      lat: 52.343319,
      lng: 16.855080
    },

  ];
  var directionsService;
  var directionsDisplay;
  var infoWindow;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 52.343580,
        lng: 16.857495
      },
      zoom: 16,
      styles: [{
        "featureType": "poi",
        "elementType": "all",
        "stylers": [{
          "visibility": "off"
        }]
      }],
      gestureHandling: 'cooperative'
    });
    // console.log("zoom=" + map.getZoom());
    // console.log("zoom=" + map.getZoom()+" bounds="+map.getBounds().toUrlValue());
    google.maps.event.addListener(map, 'zoom_changed', function() {
      console.log("zoom=" + map.getZoom());
    });
    google.maps.event.addListener(map, 'bounds_changed', function() {
      console.log("zoom=" + map.getZoom() + " bounds=" + map.getBounds().toUrlValue());
    });
    infoWindow = new google.maps.InfoWindow();
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map,
      preserveViewport: true,
      markerOptions: {
        visible: false
      }
    });

    createSourceMarker();
    createDestinationMarkers();
  }

  function markerClicked(destinationLocation) {
    var directionsRequest = {
      origin: sourceLocation,
      destination: destinationLocation,
      travelMode: 'DRIVING'
    };

    directionsService.route(directionsRequest, handleDirectionResults);
  }

  function handleDirectionResults(result, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(result);
    } else {
      console.log(status);
    }
  }


  function createSourceMarker() {
    new google.maps.Marker({
      position: sourceLocation,
      map: map,
      icon: 'http://nakujawskiej.pl/nk/wp-content/uploads/mapMarkers/marker-main.svg'
    });
  }

  var opis = [

    '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<center><h4 id="firstHeading" class="firstHeading">Apteka</h4></center>' + '<hr>' +
    '<div id="bodyContent">' +
    '<p><b>Odległość :</b>' + '  750m' + '<br>' + '<b>Czas dojazdu :</b>' + '  2 min</p>' +
    '</div>' +
    '</div>',

    '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h4 id="firstHeading" class="firstHeading">Przedszkole</h4>' + '<hr>' +
    '<div id="bodyContent">' +
    '<p><b>Odległość :</b>' + '  450m' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  2 min</p>' +
    '</div>' +
    '</div>',
  ];

  var opisIndex = 0;

  var iconBase = 'http://nakujawskiej.pl/nk/wp-content/uploads/mapMarkers/';
  var markers = [
    iconBase + 'marker-01.svg',
    iconBase + 'marker-02.svg'
  ];

  var markersIndex = 0;

  function createDestinationMarkers() {
    destinationLocations.forEach(function(location, index) {
      var opisIndex = markersIndex;
      var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: markers[markersIndex++ % markers.length],
      });

      marker.addListener('click', function() {
        infoWindow.setContent(opis[opisIndex % opis.length]);
        infoWindow.open(map, marker);
      });
      marker.addListener('click', function() {
        markerClicked(location);
      });
    })

  }
  // google.maps.event.addDomListener(window, "load", initMap);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo5rkrpNDFQnr5Afq9fKGmGjOTPC0C390&callback=initMap" async defer></script>

How to disable map zooming after rendering driving directions?

1 Answers1