Unable to get Alternatives Routes while using google maps API to render onto the map

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);
            }