CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Sahana
Sahana

Reputation: 13

Google maps api directions zoom not working

Im using below code to show a distance between two distances but zoom doesn't work it always will be in default zoom level. I tried setting lot of values but it's not working. Please help.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var from = "";

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.preserveViewport = false;
  var dallas = new google.maps.LatLng(32.8931567, -97.0402193);

  var mapOptions = {
    zoom: 15,
    center: dallas
  };
  map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
  map.setZoom(map.getZoom()+5);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
  var start = 'dallas airport terminal a';
  var end =  'SpringHill Suites';
  console.log("HotelDetail: " + end);
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Views: 2335

Answers (1)

hennes
hennes

Reputation: 9342

For what you want to achieve, the preserveViewport property needs to be set to true like this.

directionsDisplay = new google.maps.DirectionsRenderer({
    preserveViewport: true
});
//directionsDisplay.preserveViewport = false;

In addition, your code sets a zoom level of 20 which is too high to see anything on the map. Here is a working example with an initial zoom level of 12: JSFiddle

Upvotes: 2

Related Questions