Drawing Routes onto MKMapView Using Unofficial Google Maps Directions API

Posted: September 8, 2010 in Uncategorized

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.

IPhone Google Maps

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.


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.

  1. Rus Flaviu says:

    can you please send me the sample project because the download link doesn’t work.
    Thanks in advance

  2. funmania says:

    Is it acceptable in app store?? means we can use it for making official apps for iPhone right?

  3. Saurabh says:

    Hi , i tried a similar approach a year back, but was taking kml output and parsing it and then drawing a polyline myself. Your approach sounds better but I am unable to downlaod the zip. even http://blog.kadirpekel.com is not opening. Any pointers??????

  4. johana says:

    how about using an MKOverlayView object to draw the path there?

  5. Joiningss says:

    Good job !!!

  6. Edwin Heng says:

    Thanks Kiran, it works like a charm..

  7. Melvin J says:

    Too good…

  8. jchahoud says:

    Great work, thanks for sharing!

  9. hey there and thank you for your info – I have definitely picked up something new from right here.
    I did however expertise some technical points using this site,
    as I experienced to reload the site lots of times previous to I could get
    it to load correctly. I had been wondering if your hosting
    is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google
    and could damage your high quality score if advertising and marketing with Adwords.

    Anyway I’m adding this RSS to my email and could look out for much more of your respective exciting content. Ensure that you update this again soon.

    • Kiran Salke says:

      Hi Byron,

      I am glad that you got to know something new here and thanks for your input too. I will have a look at it.
      Thanks for adding it to your RSS. hopefully u will find it useful.


  10. Nik Jadav says:

    Hi Kiran

    I just want to know Is there any query limit (means 1000 per hour) for link http://maps.google.com/maps?saddr=41.029598,28.972985&daddr=41.033586,28.984546&output=dragdir bcoz I want to apply in my app and after that upload to app store so please give me reply as soon as possible from u

    Nikunj Jadav

  11. Nik Jadav says:

    Hi Kiran,

    Thanks Kiran Wow what a demo for display map route.

    I use your route demo in my app but I have face issue regarding RegexKitLite error.

    I am used Xcode 4.5 and

    I search on google and add -licucore in other linker flags or add libicurecore.dylib library but when i run on device its give me error

    ld: library not found for -licucore
    clang: error: linker command failed with exit code 1 (use -v to see invocation)

    So please give me reply as soon as possible from u

    Nikunj Jadav

  12. homepage says:

    Interesting blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple adjustements would really make my blog jump out.
    Please let me know where you got your design. With thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s