Home/ Questions/Q 8965779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:53:05+00:00

I am trying to learn Google Maps API to get directions from Point-A to

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0