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>
See Question&Answers more detail:os