I'm using the code below to get the route between two points:

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
}

It's working fine, but I don't want to change my map position and zoom level when drawing route. So when I call the code above with different latitude and longitude values, I would like my map position and zoom level to be maintained. Any idea?

I'm using the code below to get the route between two points:

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
}

It's working fine, but I don't want to change my map position and zoom level when drawing route. So when I call the code above with different latitude and longitude values, I would like my map position and zoom level to be maintained. Any idea?

• javascript
• google-maps-api-3
• map-directions

2 Answers 2

When you create the DirectionsRenderer^api-doc, you can pass a DirectionsRendererOptions^api-doc object to the constructor function or you can call the DirectionsRenderer.setOptions method if you would like to change the options at some time after creation.

You can use the preserveViewport property of the DirectionsRendererOptions object to control how the renderer will interact with the map. Setting preserveViewport to truewill leave the map display unchanged:

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setOptions({ preserveViewport: true });
        directionsDisplay.setDirections(response);
    }
}

This makes the error stop showing, but still the route doesn't draw well, looks like there is some data missing:

directionsDisplay.setOptions({ preserveViewport: true });
directionsDisplay.setDirections(response);