javascript - error in displaying Directions webservice result on to the google map

Question

I am using webservices Direction Service API to display the route on google map. And not able to succefully execute the examples provided in the webservices Directions API documentation. This workflow is breaking with below ambiguous error

Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast

May be I need another pair of eyes to look into this issue. Could you please help in resolving this issue. Here is the code I am trying execute

setBaseMap();
var directionsUrl = "https://maps.googleapis.com/maps/api/directions/json?origin=sydney,au&destination=perth,au&waypoints=via:-37.81223%2C144.96254%7C-34.92788%2C138.60008&key=AIzaSyDFc2qnwwi91cEflfhXFtojggvFsX6wme8";
sendRequest(directionsUrl, "GET", "true", custimiseDriection, null );

function sendRequest(url, method, isJSON, callback, paramList) {   
    xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, true);
    xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
if (isJSON == "true")
callback(xmlhttp.responseText, paramList);
else
callback(xmlhttp.responseXML, paramList);
} else {
alert(xmlhttp.responseText);
}
}
};
xmlhttp.send();
}

function custimiseDriection(result, paramList)
{
 //console.log(result);
var directionResult = JSON.parse(result);
rendererOptions = {
map : myMap,
suppressMarkers : true,
polylineOptions : {
strokeColor : "red"
}
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setDirections(directionResult);    
}

function setBaseMap() {
var mapOptions = {
zoom : 10,
center : new google.maps.LatLng(-33.8636979,  151.207455),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById('map'), mapOptions);
stepDisplay = new google.maps.InfoWindow();
}

html, body {
  height: 100%;
  margin: 0;
}
#map{
  height: 100%;
  margin: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

Answer 1

The Google Maps Javascript API DirectionsRenderer doesn't render the response from Directions API web service

From the documentation:

DirectionsRenderer class

Renders directions obtained from the DirectionsService.

Use the Google Maps Javascript API v3 DirectionsService to get the route to render.

proof of concept fiddle (with your route)

code snippet:

// var directionsUrl = "https://maps.googleapis.com/maps/api/directions/json?origin=sydney,au&destination=perth,au&waypoints=via:-37.81223%2C144.96254%7C-34.92788%2C138.60008

var geocoder;
var myMap;
var stepDisplay;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  setBaseMap();
  var request = {
    origin: "sydney,au",
    destination: "perth,au",
    waypoints: [{
      location: new google.maps.LatLng(-37.81223, 144.96254),
      stopover: false
    }, {
      location: new google.maps.LatLng(-34.92788, 138.60008),
      stopover: false
    }],
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      custimiseDriection(result, {});
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function custimiseDriection(result, paramList) {
  //console.log(result);
  // var directionResult = JSON.parse(result);
  rendererOptions = {
    map: myMap,
    suppressMarkers: true,
    polylineOptions: {
      strokeColor: "red"
    }
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  directionsDisplay.setDirections(result);
}

function setBaseMap() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.8636979, 151.207455),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  myMap = new google.maps.Map(document.getElementById('map'), mapOptions);
  stepDisplay = new google.maps.InfoWindow();
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>