Sunny Sunny -4 years ago 154
Javascript Question

error in displaying Directions webservice result on to the google map

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 Source

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"></script>
<div id="map"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download