error in displaying Directions webservice result on to the google map

Viewed 1786

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>

1 Answers
Related