Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the list of waypoints of a route displayed on the Google maps, through their API V3?

The GDirections class of Google maps API helped me in "displaying" the route between two supplied coordinates.

Now I want a list of ALL the coordinates on that route.

Any hints on how to get this?

EDIT Just now discovered http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRoute

Its overview_path property gives the list of ALL the waypoints of the route. Is DirectionsRoutethe right class for this problem Or I am missing some point?

EDIT - 2

With the help of this link shown by mkram0 below, I have modified the code as follows:

The Map IS getting displayed. The Route IS getting displayed.

I was thinking of placing markers on the first four coordinates on the route. Those markers don't get displayed. Any helps? Please.

directionsService.route (request, 
                            function (result, status) 
                            {
                                if (status == google.maps.DirectionsStatus.OK)
                                {
                                    directionsDisplay.setDirections (result);

                                    for (var route in result.routes) 
                                    {
                                        for (var leg in route.legs) 
                                        {
                                            for (var step in leg.steps) 
                                            {
                                                for (var latlng in step.path) 
                                                {
                                                    pointsArray.push(latlng);
                                                }
                                            }
                                        }
                                    }

                                    var point1 = new google.maps.Marker ({
                                        position:pointsArray[0],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });

                                    var point2 = new google.maps.Marker ({
                                        position:pointsArray[1],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });

                                    var point3 = new google.maps.Marker ({
                                        position:pointsArray[2],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });

                                    var point4 = new google.maps.Marker ({
                                        position:pointsArray[3],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });
                                }
                            });
like image 400
Aquarius_Girl Avatar asked May 27 '11 12:05

Aquarius_Girl


2 Answers

The overview_path doc says it returns

An array of LatLngs representing the entire course of this route. The path is simplified in order to make it suitable in contexts where a small number of vertices is required.

I don't interpret that to mean the same thing as returning an array of all the waypoints on a route. And in your question, it's not clear to me whether you want waypoints or coordinates (lat long) or both. If I were you, I'd also consider legs, which returns

an array of DirectionsLegs, each of which contains information about the steps of which it is composed. There will be one leg for each waypoint or destination specified.

Within DirectionsLeg, I think you should also take a look at steps and via_waypoints.

like image 25
Mike Sherrill 'Cat Recall' Avatar answered Oct 12 '22 11:10

Mike Sherrill 'Cat Recall'


Solved this myself :) The overview_path was the correct method w.r.t displaying the coordinates: Just for checking if this really shows something, I have displayed markers on the resulting first four coordinates.

directionsService.route (request, 
                            function (result, status) 
                            {
                                alert(status);
                                if (status == google.maps.DirectionsStatus.OK)
                                {
                                    directionsDisplay.setDirections (result);

                                    var pointsArray = [];

                                    pointsArray = result.routes[0].overview_path;

                                    var point1 = new google.maps.Marker ({
                                        position:pointsArray[0],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });

                                    var point2 = new google.maps.Marker ({
                                        position:pointsArray[1],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });

                                    var point3 = new google.maps.Marker ({
                                        position:pointsArray[2],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });

                                    var point4 = new google.maps.Marker ({
                                        position:pointsArray[3],
                                        draggable:true,
                                        map:map,
                                        flat:true
                                        });
like image 55
Aquarius_Girl Avatar answered Oct 12 '22 12:10

Aquarius_Girl