Highlight a specified route on Google Maps v2 Android
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.
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;
}
}