Highlight a specified route on Google Maps v2 Android

Question

Right, so I'm currently using the Google Directions API in my app to retrieve the route between two locations.

When I send a request for a route directions, I retrieve a number of details in JSON regarding the route including the names of every road along the route, their corresponding start and end lat-long co-ordinates, and their polyline value.

For example: If I send the request http://maps.googleapis.com/maps/api/directions/json?origin=redfern+ave,+dublin&destination=limetree+ave,+dublin&sensor=false between two roads, I get the following JSON response (output for one road along route).

 {
                     "distance" : {
                        "text" : "0.2 km",
                        "value" : 203
                     },
                     "duration" : {
                        "text" : "1 min",
                        "value" : 18
                     },
                     "end_location" : {
                        "lat" : 53.435250,
                        "lng" : -6.132140000000001
                     },
                     "html_instructions" : "Head \u003cb\u003eeast\u003c/b\u003e on \u003cb\u003eRedfern Ave.\u003c/b\u003e toward \u003cb\u003eMartello Court\u003c/b\u003e",
                     **"polyline" : {
                        "points" : "woceIvgmd@O}DOkDQqF"**
                     },

So far my application parses this information and simply lists the roads and directions in a list view like this:

What I want to do it highlight the whole route from A to B on a map, however I've found nothing useful online on how to do this on the new Google Maps API v2. I see that polyline's are used instead of overlays to draw lines on Google Maps v2, however from what I can tell, they only draw straight lines which is useless for me. Is there anyway of highlighting the route using the information I have at my disposal (road names, start & end lat-long co-ordinates, polyline points? Any help is appreciated.

Also, I see there is a 'polyline' value in the response which could be useful but I can't work out how to parse or use this bit of information. Does anyone know how I can make sense of this value to plot a polyline?

**"polyline" : {
             "points" : "woceIvgmd@O}DOkDQqF"**

EDIT: My solution code is provided in my answer below.

Answer 1

I finally managed to get it working after a lot of trial and error! It now fully highlights a specified route from A to B on a map (as seen in my screenshot below). I have also thrown in my code for anyone who may need it in future.

public class PolyMap extends Activity {
        ProgressDialog pDialog;
        GoogleMap map;
        List<LatLng> polyz;
        JSONArray array;
        static final LatLng DUBLIN = new LatLng(53.344103999999990000,
                -6.267493699999932000);

        @SuppressLint("NewApi")
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.map_layout);
            map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map))
                    .getMap();
            map.moveCamera(CameraUpdateFactory.newLatLngZoom(DUBLIN, 15));
            map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
            new GetDirection().execute();
        }

        class GetDirection extends AsyncTask<String, String, String> {

            @Override
            protected void onPreExecute() {
                super.onPreExecute();
                pDialog = new ProgressDialog(PolyMap.this);
                pDialog.setMessage("Loading route. Please wait...");
                pDialog.setIndeterminate(false);
                pDialog.setCancelable(false);
                pDialog.show();
            }

            protected String doInBackground(String... args) {
                Intent i = getIntent();
                String startLocation = i.getStringExtra("startLoc");
                String endLocation = i.getStringExtra("endLoc");
                            startLocation = startLocation.replace(" ", "+");
                    endLocation = endLocation.replace(" ", "+");;
                String stringUrl = "http://maps.googleapis.com/maps/api/directions/json?origin=" + startLocation + ",+dublin&destination=" + endLocation + ",+dublin&sensor=false";
                StringBuilder response = new StringBuilder();
                try {
                    URL url = new URL(stringUrl);
                    HttpURLConnection httpconn = (HttpURLConnection) url
                            .openConnection();
                    if (httpconn.getResponseCode() == HttpURLConnection.HTTP_OK) {
                        BufferedReader input = new BufferedReader(
                                new InputStreamReader(httpconn.getInputStream()),
                                8192);
                        String strLine = null;

                        while ((strLine = input.readLine()) != null) {
                            response.append(strLine);
                        }
                        input.close();
                    }

                    String jsonOutput = response.toString();

                    JSONObject jsonObject = new JSONObject(jsonOutput);

                    // routesArray contains ALL routes
                    JSONArray routesArray = jsonObject.getJSONArray("routes");
                    // Grab the first route
                    JSONObject route = routesArray.getJSONObject(0);

                    JSONObject poly = route.getJSONObject("overview_polyline");
                    String polyline = poly.getString("points");
                    polyz = decodePoly(polyline);

                } catch (Exception e) {

                }

                return null;

            }

            protected void onPostExecute(String file_url) {

                for (int i = 0; i < polyz.size() - 1; i++) {
                    LatLng src = polyz.get(i);
                    LatLng dest = polyz.get(i + 1);
                    Polyline line = map.addPolyline(new PolylineOptions()
                            .add(new LatLng(src.latitude, src.longitude),
                                    new LatLng(dest.latitude,                dest.longitude))
                            .width(2).color(Color.RED).geodesic(true));

                }
                pDialog.dismiss();

            }
        }

        /* Method to decode polyline points */
        private List<LatLng> decodePoly(String encoded) {

            List<LatLng> poly = new ArrayList<LatLng>();
            int index = 0, len = encoded.length();
            int lat = 0, lng = 0;

            while (index < len) {
                int b, shift = 0, result = 0;
                do {
                    b = encoded.charAt(index++) - 63;
                    result |= (b & 0x1f) << shift;
                    shift += 5;
                } while (b >= 0x20);
                int dlat = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
                lat += dlat;

                shift = 0;
                result = 0;
                do {
                    b = encoded.charAt(index++) - 63;
                    result |= (b & 0x1f) << shift;
                    shift += 5;
                } while (b >= 0x20);
                int dlng = ((result & 1) != 0 ? ~(result >> 1) : (result >> 1));
                lng += dlng;

                LatLng p = new LatLng((((double) lat / 1E5)),
                        (((double) lng / 1E5)));
                poly.add(p);
            }

            return poly;
        }
    }

Answer 2

With Android maps api 2 indeed you need to use Polyline class to draw the route on a map (at least it is an easiest way :) ). What you need to do - is to supply list of points along your route.

As for highlighting the active route - there is a handy interface in Polyline class setColor, so you can set whatever color you want to the active route (including an alpha channel)

Polyline line1 = map.addPolyline(new PolylineOptions()
 .add(new LatLng(51.5, -0.1), new LatLng(40.7, -74.0))
 .width(5)
 .color(0xFFFF0000)); //non transparent red

Polyline line2 = map.addPolyline(new PolylineOptions()
 .add(new LatLng(51.5, -0.1), new LatLng(40.8, -74.2))
 .width(5)
 .color(0x7F0000FF)); //semi-transparent blue

Please note you are free to change polyline color anytime you want (f.i. on user click, or something)

As for JSON response from google - route points are encoded, so you can refer to this question to understand how to decode it