One of the toughest features to implement in the latest version of WVU Mobile Web was the maps feature for the jQTouch-enabled views for iPhone and Android. It looks good but it was a several week bear and the single most annoying thing I've put together related to jQTouch. With that in mind I'm trying to share my experience and code so others can more easily implement a similar feature.
On GitHub I now have a Google Maps v3 for jQTouch repository. It contains a very simple project that is an example of using Google Maps JavaScript API v3 with revision 133 of jQTouch and jQuery 1.4. I do not currently have this demo working with revision 148 of jQTouch. r148 is the absolute bleeding edge at the time of this writing. Some points to keep in mind:
- r133 is not the beta version linked from the main jQTouch site. It was the edge release when i started on my project. If you've been working off the beta the only change I think you'll have to make is to add a div with the ID of
jqtaround your divs. Refer to the project to see an example. - the project appears to handle rotation of the device after the map is loaded just fine. It does go a little wobbly if the device is rotated before the map is loaded. I still need to troubleshoot that.
- the project assumes map "pages" will be loaded via AJAX. Our system dynamically generates many maps so that's just how we're dealing with it.
- any "page" that will link to a map page needs to have the class
clear-map-detailso the DOM is properly cleaned up after closing out the map. This reduces a "white flash" you could see as well as making future maps load properly. - the
notransformclass in jqtouch.css is actually from r143 of jQTouch. I had had something similar but went with David's implementation from a later revision instead. This class makes the map draggable.
To see a demo of this all working check out WVU Mobile Web on your iPhone or Android device.
Some helpful links: