Google map API- display alternative routes with distance on info window

Question

I am using google map and I am bit stuck at one point. I want to display alternative routes for my source and destination point. Currently I am using the code which is working perfectly and displaying correct result but the only the problem is that this code displaying infowindow for all routes with distance and time. And it needs to be differently colored for alternative routes..

Please help me out.

var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING,
                provideRouteAlternatives: true,
                optimizeWaypoints
                unitSystem: google.maps.UnitSystem.METRIC
            };
            directionsService.route(request,
                function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {                    
                    var step=2;
                        for (var i = 0, len = response.routes.length; i < len; i++) {
                            new google.maps.DirectionsRenderer({
                                map: mapObject,
                                directions: response,
                                routeIndex: i
                            });                         
                            stepDisplay.setContent(response.routes[i].legs[i].steps[step].distance.text + "<br>" + response.routes[i].legs[i].steps[step].duration.text + " ");
            stepDisplay.setPosition(response.routes[i].legs[i].steps[step].end_location);
            stepDisplay.open(mapObject);
                        }
                    } else {
                        $("#error").append("Unable to retrieve your route<br />");
                    }

                });

Sorry. I'm confused as to what is your exact problem. The title of the post is **display alternative routes with distance on info window** but then you mentioned ***but the only the problem is that this code displaying infowindow for all routes with distance and time***. You also mentioned ***And it needs to be differently colored for alternative routes..***. If I understand it correctly, do you want to show an `infoWindow` only on the **main route**? And for the alternative route (lines) to have a different color? — AL., Mar 29 '16 at 23:34
I need two helps. 1)I need infowindow(distance and time) for all routes(alternative and main routes) 2)In all routes line should be different colors — user3724675, Mar 30 '16 at 09:30

score 0 · Answer 1 · edited May 23 '17 at 11:44

I analyzed your code as much as I could (not really that experienced with JS). So I'm gonna go on ahead and try to address the concerns on your comment.

InfoWindow for all routes

Based on the code snippet you provided, the for loop already iterates over the response.routes. In here, I see you are already setting an InfoWindow (showing distance and time), based on the route:

stepDisplay.setContent(response.routes[i].legs[i].steps[step].distance.text + "<br>" + response.routes[i].legs[i].steps[step].duration.text + " ");
stepDisplay.setPosition(response.routes[i].legs[i].steps[step].end_location);
stepDisplay.open(mapObject);

-- It made me wonder as to why you still specified this as a problem. Then it hit me, is it that the only InfoWindow shown here is for the last route? If so, your probably not setting it to the map properly. So I looked around and found this JSFiddle Sample where I can try out if it's possible to show multiple InfoWindows. I just added the code where you include an InfoWindow like so:

directionsDisplay.setDirections(response);
            var step = 1;
            var infowindow2 = new google.maps.InfoWindow();
            infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " ");
            infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location);
            infowindow2.open(map);

-- when you open the JSFiddle Sample above, just add the code snippet like above, below the directionsDisplay.setDirections(response); and it will show something like this:

[Multiple InfoWindow Map Screenshot][1]

Route lines should be different colors

For this concern, I found a similar post here. From the answer:

You can specify the color of the line when you create the DirectionsRenderer, using the optional DirectionsRendererOptions struct.

Here's a part of the snippet in the answer:

directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: "red"
    }
  });

I tried it out and this is how it looked like:

[Route Different Color Screenshot][2]

How you set the color of each route is up to you though. Hope this helps. Good luck. :)

PS: Included the Screenshot links in the comments.*

Screenshot links :) [1]: http://i.stack.imgur.com/32uo2.png [2]: http://i.stack.imgur.com/CWRna.png — AL., Mar 31 '16 at 02:18
I think this post might also be helpful for you -- http://stackoverflow.com/questions/30648228/adding-infowindow-on-google-directions-route — AL., Mar 31 '16 at 02:24

Google map API- display alternative routes with distance on info window

1 Answers1