Question

I want to make an html5-based webpage for mobile devices that shows a map from Google Maps (or other map provider, however I prefer GMaps), with multitouch support. Is this possible?

By this I mean: If you open Google Maps’ android native app you see that you can pinch to zoom, rotate the map with two fingers, etc. However if you look at Google Maps’ html5 app on a mobile platform, while you can still pan around with one finger you can’t pinch to zoom etc. To zoom in the latter (html5) app, you have to press the provided “+” and “-” buttons.

Lastly, there may be some funky way of doing this that works for my particular application that is not the regular way of embedding GMaps in html5, so I want to share my application idea briefly. The overall goal is to make an html5 mobile app that shows only a limited area (say, 20km around a developer-chosen location) at only a few zoom levels (say, 4 levels). This means that there is only a small finite number of tiles that ever need to be displayed. So perhaps these tiles could be prepackaged and stored locally when the app is first loaded, in order that the user never has to wait for a tile to load on-the-fly. Therefore the GMaps APIs may never need to be used by the app user, it may be simply like a large image I am just panning/zooming around inside. In fact, we can use another map provider, not GMaps, if that is easier. Is there some other funky way of doing this other than the regular way of embedding (Google)Maps data in html5 document?

Thanks,

Answer 1

Google Maps API v3 understands pinch-to-zoom on mobile devices. It does not require the use of the + and – buttons. Example: http://tiny.ucsf.edu/parnassus_map

Exception: It seems that some HTC hardware running Android OS doesn’t handle pinch-to-zoom in an expected way in this context. I believe this has to do with ignoring the viewport settings in the web page that tell the browser to not handle the zooming itself. I am unaware of any workaround for this problem and have been living with it for some time. I have experienced this problem on HTC hardware like the Evo and Thunderbolt, but not on hardware by other manufacturers.

UPDATE: OP reports problem on Droid 2, so I guess it’s not just HTC hardware. One device that does not exhibit the problem is a Galaxy Tab running Honeycomb, so it would appear that not all Android devices are affected.

YET MORE FURTHER SON OF UPDATE: It would appear that, currently, you cannot rely on being able to receive pinch-to-zoom events in JavaScript on Android browsers. Here it is in the Android issue tracker: http://code.google.com/p/android/issues/detail?id=11909