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>

UPDATE:
If you want to render the result using the DirectionsRenderer, there is a related question: Google Maps display route from json, that doesn't quite work out of the box (I get a javascript error: Uncaught TypeError: Cannot read property 'travelMode' of undefined as the request is now expected to be available, but it can be updated to work: proof of concept fiddle (with your route displayed via the DirectionsRenderer)). Note that this is not documented, so is probably not safe for production code as it may break at any time.