Srinath Srinath - 3 months ago 21
Javascript Question

Problems with {directionsService} API of Google Maps API v3

I am trying to learn Google Maps API to get directions from Point-A to Point-B. When I simply try the sample code from the tutorial, my Javascript console takes me to some code section that I cannot understand and the debugger is stopped at a line that reads "See the Terms of Service for more information: http://www.google.com/help/terms_maps.html.". Following is my html code listing:

<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
directionsDisplay.setMap(map);
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}

function calcRoute() {
initialize()
var start = "Sydney, NSW";
var end = "Chatswood, NSW";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

</script>
</head>
<body onload="calcRoute()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>


The map does get displayed in the browser, but the directions do not show up. Can anybody see the problem here? Any help would be much appreciated.

Answer

The problem is the order of these two lines:

    directionsDisplay.setMap(map);
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

Reverse them and it should work, setting the map of the Directions Renderer to null (or undefined), removes the directions from the map. I changed them to (so the map is assigned to the global map variable):

    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    directionsDisplay.setMap(map);

Working Example

code snippet:

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

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  initialize()
  var start = "Sydney, NSW";
  var end = "Chatswood, NSW";
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map_canvas {
    height: 650px;
  }
}
<script src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="calcRoute()">
  <div id="map_canvas" style="width:100%; height:100%"></div>