How to disable map zooming after rendering driving directions? - google-maps-api-3

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

Answer 1

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>