I’m trying to create a mobile-friendly web page that will allow a user to drag an <img> around in a <div>. I’ve got this working using the image.ontouchstart method. Now I want to make it so the user can pinch-to-zoom when viewing this from an iOS device (I’m currently browsing to my page locally from my iPad). From the research I’ve done so far, it seems like the way to go is to use the Google Maps Javascript API.
My question is:
It is possible to use the Google Maps Javascript API to leverage it’s pinch-to-zoom capabilities on a regular image, and not just a map?
Every example I’ve seen sets up a google.maps.Map object and specifies a latitude/longitude. I just need it to work for any given <img> I place into my <div>. Does anyone know if this is possible, or know of any examples I could look at? Or maybe there is an easier way to do it on a regular image than using the Google API?
I believe your options are fairly limited. But if you can tolerate the user being aware that the map is underneath your image (because they’ll see it for a split second after every zoom) then as a starting point, take a look at the answer at any technology to preview high definition photo, can zoom in and out like google maps.
It assumes you are starting with a high-definition image and that you don’t want to load the whole image completely into the mobile browser just to display it completely zoomed out. As you zoom in, the appropriate elements of the image (which has been broken into tiles) will be loaded.
I do not believe that there is an easy way to use the API as an image browser without having the maps at least hidden out of view under the image overlay, but this will give you a starting point at least to see what is (and perhaps isn’t) possible.