issue in Draw route between two point using polyline in google map

Question

I use SupportMapFragment to show google map. I use Direction API two route between two location. I parse JSON data that returned form Direction API with GSON library and extract steps tag that show each route. then I use polyline to draw it. but my route doesn't match on road and mostly it is straight line.

this code is my extraction of JSON Direction that google return:

GoogleDirectionResponse data = (GoogleDirectionResponse) response;
    if (data.getStatus().matches("OK")){
        List<LatLng> steps = new ArrayList<>();
        RoutesData routesData = data.getRoutes().get(0);
        LegData legData = routesData.getLegs().get(0);
        for (StepsData item : legData.getSteps()){
            LatLng start = new LatLng(item.getStart_location().getLat(), item.getStart_location().getLng());
            LatLng end = new LatLng(item.getEnd_location().getLat(), item.getEnd_location().getLng());
            steps.add(start);
            steps.add(end);
        }
        onDirectionFetchedListener.onDirectionFetched(steps);
    }

I hold LatLng data in array and pass it to fragment to draw it:

@Override
public void onDirectionFetched(List<LatLng> steps) {
    PolylineOptions rectLine = new PolylineOptions().width(3).color(
            Color.RED);
    for (LatLng item : steps) {
        rectLine.add(item);
    }

    Polyline polylin = map.addPolyline(rectLine);
}

and this is my map:

take look at red line. that is not go on road. how can fix this issue. thanks

Answer 1

According to the documentation:

Each element in the legs array specifies a single leg of the journey from the origin to the destination in the calculated route. For routes that contain no waypoints, the route will consist of a single "leg," but for routes that define one or more waypoints, the route will consist of one or more legs, corresponding to the specific legs of the journey.

So, you won't get a good representation of the route using the legs array.

To get a good representation of the route you can use the field overview_polyline. From the documentation:

overview_polyline contains a single points object that holds an encoded polyline representation of the route. This polyline is an approximate (smoothed) path of the resulting directions.

To decode this overview_polyline you can use the PolyUtil.decode method from the Google Maps Android API Utility Library.

Answer 2

Step is route instruction. You must parse overview_polyline object and get the encoded polyline string. then decode the string using android-maps-utils library:

List<LatLng> decodedPoints = PolyUtil.decode(polylineString);
PolylineOptions options = new PolylineOptions();
options.width(3);
options.color(Color.RED);
options.addAll(decodedPoints);

map.addPolyline(options);

Answer 3

Xamarin version:

    List<LatLng> coordsList = new List<LatLng>();
    foreach (var step in leg.steps)
    {
        var points = PolyUtil.Decode(step.polyline.points);
        foreach (var point in points)
        {
            coordsList.Add(point);
        }
    }

Answer 4

Answer is using the 'overview_polyline' of the json response of the Google Direction API.

I had same issue and needed to implement in Xamarin Forms and after two days of work finally over come the issue.

'overview_polyline' needs to be decoded and get the position List.

List<Position>

Then use the position List for drawing the Polyline.

Blog: https://www.xamboy.com/2019/05/17/exploring-map-tracking-ui-in-xamarin-forms/ GitHub : https://github.com/rdelrosario/MapTrackingSample

Download the sample project from the Github and follow the below steps:

For decoding the 'overview_polyline' use the PolylineHelper.cs class in the above mentioned project and it will return the Position List.Use the position List for drawing the Polylines in a overlay.

//calling the method from helper class and pass the 'overview_polyline'
Route _route; 
var positions=(Enumerable.ToList(PolylineHelper.Decode(_route.overview_polyline.points)));
//Drawing the Polylines
foreach (var _step in positions)
{
polyline.Positions.Add(new Position(_step.Latitude, _step.Longitude));
}
//Adding the drawn polylines to the overlay of the map
polyline.StrokeColor = Color.Blue;
polyline.StrokeWidth = 5f;
map.Polylines.Add(polyline);

PS: This is the implementation for the above mention problem in Xamarin Forms and credit should goes to the author of the blog.

Happy Coding!!