Xamarin android Google Maps API Calculate and display route and calculate routes distance

Question

I'm working on mobile android app in C# where I need to display a route and calculate it's distance.

I need a result similar like in this picture

Answer 1

To display a route, you need at first calculate it. You can use google Direction API to do that. The cool thing is, that it will return you a total distance as well. So it's only one request to satisfy all your requirements.

Google Directions API have a lot of requests examples, you can calculate road between two places by referencing them by name. But the most straightforward is to use a latitude and longitude. For example:

https://maps.googleapis.com/maps/api/directions/json?origin=lat1,lon1&destination=lat2,lon2&key=yourApiKey

You can get the API key from a Google console.

You can play and just change variables in this link and open it in browser, to see the returning object.

When you receive the return object, you will need to parse it.

The distance will be at googleApiRouteObject.routes[0].legs[0].distance; There you will find a int representation in meeters, and string representation like 2.3km.

The waypoints will be coded in Polylines, you will need to parst them. You can find how to do that with code examples here: https://developers.google.com/maps/documentation/utilities/polylineutility

There is one of the examples:

List<Android.Locations.Location> FnDecodePolylinePoints(string encodedPoints) 
        {
            if ( string.IsNullOrEmpty ( encodedPoints ) )
                return null;
            var poly = new List<Android.Locations.Location>();
            char[] polylinechars = encodedPoints.ToCharArray();
            int index = 0;

            int currentLat = 0;
            int currentLng = 0;
            int next5bits;
            int sum;
            int shifter;

            try
            {
                while (index < polylinechars.Length)
                {
                    // calculate next latitude
                    sum = 0;
                    shifter = 0;
                    do
                    {
                        next5bits = (int)polylinechars[index++] - 63;
                        sum |= (next5bits & 31) << shifter;
                        shifter += 5;
                    } while (next5bits >= 32 && index < polylinechars.Length);

                    if (index >= polylinechars.Length)
                        break;

                    currentLat += (sum & 1) == 1 ? ~(sum >> 1) : (sum >> 1);

                    //calculate next longitude
                    sum = 0;
                    shifter = 0;
                    do
                    {
                        next5bits = (int)polylinechars[index++] - 63;
                        sum |= (next5bits & 31) << shifter;
                        shifter += 5;
                    } while (next5bits >= 32 && index < polylinechars.Length);

                    if (index >= polylinechars.Length && next5bits >= 32)
                        break;

                    currentLng += (sum & 1) == 1 ? ~(sum >> 1) : (sum >> 1);
                    Android.Locations.Location p = new Android.Locations.Location("");
                    p.Latitude = Convert.ToDouble(currentLat) / 100000.0;
                    p.Longitude = Convert.ToDouble(currentLng) / 100000.0;
                    poly.Add(p);
                } 
            }
            catch 
            {


            }
            return poly;
        }

Now, you will need to draw them on a map. I'll advice you to use google maps for that.

    // Decode the points
    var lstDecodedPoints = FnDecodePolylinePoints(encodedPoints);
    //convert list of location point to array of latlng type
    var latLngPoints = new LatLng[lstDecodedPoints.Count];
    int index = 0;
    foreach (Android.Locations.Location loc in lstDecodedPoints){
      latLngPoints[index++] = new LatLng(loc.Latitude, loc.Longitude);}
    // Create polyline 
    var polylineoption = new PolylineOptions();
    polylineoption.InvokeColor(Android.Graphics.Color.GRREN);
    polylineoption.Geodesic(true);
    polylineoption.Add(latLngPoints);
    // Don't forget to add it to the main quie, if you was doing the request for a cordinate in background
   // Add polyline to map
    this.Activity.RunOnUiThread(() =>
        _map.AddPolyline(polylineoption));
    }

And that basically it, you will get a very close result as on the img.