使用谷歌地图 API 渲染到地图上时无法获得替代路线

Question

I'm developing a project for my college and I'm stuck while trying to get route alternatives. The drawMainRoute function plots a route from a given source and destination without a problem, but I want the directions service to give me alternate routes as well.

According to the Google maps API, it said, if I set provideRouteAlternatives to true then that should allow me to get all the routes from a source to destination.

Here's the link to the same [ https://developers.google.com/maps/documentation/javascript/reference/3.exp/directions#DirectionsRequest.provideRouteAlternatives]

I also tried changing it to just "alternatives: true" in the JS file, but when I did that, it never plotted a route. And found an exception on the console.

Here's my JS code for reference.

 function drawHeatMap() { heatmap = new google.maps.visualization.HeatmapLayer({ data: getPoints(), map: map, radius: 15 }); } function drawMainRoute() { //disableMap(); drawHeatMap(); var dirRenderer = new google.maps.DirectionsRenderer({ suppressMarkers: true }); var request = { origin: setStart(), destination: setEnd(), provideRouteAlternatives: true, travelMode: google.maps.TravelMode.DRIVING }; dirService.route(request, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { dirRenderer.setDirections(result); } }); dirRenderer.setMap(map); }

Answer 1

Found a way to do this. We have to iterate over the routes found and use the DirectionsRenderer to set the directions individually.

Here's the code for the same.

 function drawMainRoute() { //disableMap(); drawHeatMap(); var dirRenderer = new google.maps.DirectionsRenderer({ suppressMarkers: true }); dirService.route({ origin: setStart(), //yaha start kuch bhi daal sakte, direct string. lat lng ya google.map.place object destination: setEnd(), //yaha stop provideRouteAlternatives: true, travelMode: 'DRIVING' }, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { for (var i = 0; i < response.routes.length; i++) { var dr = new google.maps.DirectionsRenderer(); dr.setDirections(response); // Tell the DirectionsRenderer which route to display dr.setRouteIndex(i); dr.setMap(map); } } }); dirRenderer.setMap(map); }