Post a Comment On: The Existential Blog of Overwhelming Beauty

When I got Mel an iPod Touch for her birthday, I knew that the awesome Google Maps app for the iPhone wouldn't be on there. But I didn't know how poorly the Google Maps website would work on the iPod Touch -- dragging the map doesn't work, and all the navigation controls were too small and hard to hit with my finger. It also didn't redirect me to a more appropriate mobile version, and after hunting around for the super-stripped down version, I found it was, err, not "cool" enough for the friggin' iPod Touch! Google Maps Mobile also unfortunately doesn't work on the iPod (no Java :'( ). So I set about writing my own Google Maps interface for iPod Touch with the Google Maps API and the Google AJAX Search API.

I really wanted to be able to drag the map around on the iPod Touch; otherwise, it seems like such a waste of the touch screen! Unfortunately, as I understood it, the webpage doesn't get the normal drag events at all. After hunting around for a while, I found Mihai's attempt at writing a scrolling game for the iPhone and learned that though you don't get the single-finger drag events, you do get two-finger drag gestures, intended to scroll scrollable divs within a page, as scroll events. I placed the Google Maps container inside a scrolling div half its size, so you can "kind of" drag the map around by actually scrolling the containing div. When you scroll to the edge of the div, it resets the scroll position and recenters the map (almost seamless with a fast wifi connection). That works pretty well. (I've also tried translating all scroll events to map.panTo, but it was way too jerky on the iPod to be useful)

I store recent geocodable addresses in a cookie. When you want to go somewhere, you can either type it out or pick it from a drop-down box -- the iPod Touch Safari browser has a pretty nice interface for picking an item from a <select>.

Anyways, here it is! Check it out at www.grapier.com/maps.html. Here's how to use it:

Drag the map around using two fingersZoom in and out using the buttons on the upper leftSwitch map type, or toggle traffic overlay using the menu on the upper rightGo somewhere, get driving directions, or search for businesses using the menu on the lower leftPaginate through local search or driving direction results using the left and right arrows on the bottom right. Hit the "X" button to get out of the search.Set a business result as current location by using the pin button on the lower right after you've done a local search. You can then get driving directions to there as usual.Open a more detailed page on a business by using the pop-out button on the lowe right after you've done a local search.See all directions or local search results at once by scrolling down below the map after you've done a search.