Dec 04

iPod Touch Google Maps

CHung Wu has open sourced code that takes Google Maps and makes it iPhone friendly.

You can see it in action at www.grapier.com/maps.html (www required).

You can drag and drop the map by using two finger scrolling instead of one, and he handles scrolling in his code via:

MapSurfaceController.prototype.onScroll = function(event) {
    if (this.scrollEventsToIgnore > 0) {
	this.scrollEventsToIgnore--;
        return true;
    }
 
    var scrollTop = this.surface.scrollTop;
    var scrollLeft = this.surface.scrollLeft;
    var surfaceHeight = this.surface.offsetHeight;
    var surfaceWidth = this.surface.offsetWidth;
    var scrollRight = scrollLeft + surfaceWidth;
    var scrollBottom = scrollTop + surfaceHeight;
    var mapWidth = this.mapContainer.offsetWidth;
    var mapHeight = this.mapContainer.offsetHeight;
 
 
    if (scrollTop > 0 && scrollLeft > 0 && scrollRight < mapWidth && scrollBottom < mapHeight) {
        return true;
    }
 
    this.recenterMap();
    return true;
};

Instructions

  • Drag the map around using two fingers
  • Zoom in and out using the buttons on the upper left
  • Switch map type, or toggle traffic overlay using the menu on the upper right
  • Go somewhere, get driving directions, or search for businesses using the menu on the lower left
  • Paginate 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.

You can read more about the library