Drawing Routes onto MKMapView Using Unofficial Google Maps Directions API

As a startup you should use the great component named MKMapView that already exists in IPhone SDK since the version 3.0.0.

It is so easy to implement some map related requirements with this useful component as long as you need to draw routes between two locations. Yes, the MkMapView component is great but if it would have got a directions support it should be a perfect piece of the SDK. You already know that the built-in Google Maps applications on IPhone has the directions support somehow but the feature lacks on the MKMapView component.

To have the work done, two problems must be solved. First thing is how to obtain route drawing data, and the second one is that if we found one how we should visually draw it onto the map. Messing around the web over Google i found an unofficial Google Maps wiki Google Mapki which documents lots of unknown Google Maps API features. So you should take a look at this page http://mapki.com/index.php?title=Google_Map_Parameters to find out what should do with Google’s less known back doors.

Anyway, according to Google Mapki we could grab routing data between two locations by requesting the url below with a parameter set which are lean and mean.

http://maps.google.com/maps?saddr=41.029598,28.972985&daddr=41.033586,28.984546&output=dragdir

The parameters are self explaning

saddr: Source location’s latitude and longtitude

daddr: Destination location’s latitude and longtitude

output: Passing the value ‘dragdir’ forces http response to be in json format (I guess)

The response must be like shown below

{tooltipHtml:" (2.7\x26#160;km / 8 mins)",polylines:[{id:"route0",points:"_rlyFcxyoDn@BrEs@??VXpA~F??e@d@kAY??O@QR??i@m@kBS}C|@}@Ia@Y]i@c@uBeC_EkJ_EiAB{Dx@??SEi@e@g@oA}A{Iy@oIoAmHw@uJeBaHeB}F??@iALa@rAuBXG??j@Zj@~@f@ZdCf@zHp@|At@??Ru@",levels:"B?BB?BB?BB?BB???@???@@?BB????????BB???BB?????BBB",numLevels:4,zoomFactor:16}]}

The part that we interested in is the polylines field which contains a weird data that seems to be encoded. After some research i found Peter Chng’s blog post that points a php script that decodes encoded polyline data. I’d tried to port the script to Objective-C and fortunately it worked like a charm.

After all, i owned a NSArray instance with full of location data for the given route data and what a luck I completed the first task.

The second task completed not as hard as the first one, with the chance of facing a nice post solved my second problem. Thanks goes to Craig Spitzkoff as publishing this post which draws a bunch of location data onto MKMapView. I worked a bit to port the code as my needs and with a snippet like below it gives the screen shot shown afterward.

- (void)viewDidLoad {

[super viewDidLoad];

MapView* mapView = [[[MapView alloc] initWithFrame:

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)] autorelease];

[self.view addSubview:mapView];

Place* home = [[[Place alloc] init] autorelease];

home.name = @"Home";

home.description = @"Sweet home";

home.latitude = 41.029598;

home.longitude = 28.972985;

Place* office = [[[Place alloc] init] autorelease];

office.name = @"Office";

office.description = @"Bad office";

office.latitude = 41.033586;

office.longitude = 28.984546;

[mapView showRouteFrom:home to:office];

}

The result is:

I guess you’ve scrolled here immediately to download the sample project. Sorry if you’d expected more detailed explanations but it’s really hard to touch every edges. You should investigate the sample project instead. Here you are;

Download Sample Project

Hope this post helps.