Wednesday, February 17, 2010

Going Native: Using the Google Maps API v3 in Smartphone applications

Over the last couple of years, my office has been working on using the Google Maps API to display the Missouri State University campus map. The map is used by campus faculty, staff, students, and visitors and includes buildings, parking and transit system information. Beginning this summer, we started work on incorporating live GPS tracking of our campus buses into the map. Both the idea and GPS application on the buses came from one of our computer science students who wanted more information on the campus transit system.

Using the Google Maps API v3, I was able to create a mobile version of our map for use on smartphones. After showing it to my users, one of the first responses I got was, "Are you going to make this available as an application?". After spending many hours developing a feature-rich mobile web version, the thought of investing a large amount of time to code the same experience on multiple platforms was overwhelming. Then I began thinking of the maintenance headaches; even simple changes, such as adding a new sets of icons for custom markers, would be time consuming. All of a sudden the idea sounded much less appealing. I'd spent all this time on the mobile web version of my map, why couldn't I just use that?

All Wrapped Up

So instead of writing the maps application using the SDK of each phone platform, I wrapped my v3 Maps API site into a WebView inside a stub application. Now all the work spent on the web version automatically applies to the "native" application and my users never even know the difference. The Google Maps API team have even provided some great reference articles for Android and iPhone which help get the process started.

Optimization

Response time in this type of application was a big concern both within an app and within the browser. I saw significant performance gains by using Closure-Compiler on my JavaScript, using the CSS sprite support in v3 for markers and following most of the suggestions in the Web Performance Best Practices document. To improve the user's initial loading experience I also pre-load the WebView with static HTML that contains a "Loading..." message and use JavaScript to redirect them to the actual map page.

Popularity

I was initially skeptical of the usefulness of such a project. The mobile version of the map offers users the same functionality that they can get by simply bookmarking the map in their browser. So I was very pleasantly surprised at the both the usage and publicity the application has garnered. Within the first two weeks, the iPhone application was downloaded 1,200 times and the Android application almost 200 times. Both applications are receiving very positive reviews.

We consider this project a huge success. Going forward it will now be a priority to make sure new features work well both on the desktop as well as on mobile devices wherever possible.