Using Google Maps Javascript API pinch-to-zoom on my own image

C

2

3

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?

Cornelison answered 1/6, 2011 at 20:49 Comment(0)

M

2

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.

Mimesis answered 2/6, 2011 at 0:3 Comment(0)

I

3

You can look at my tutorial to do it with Google Maps : http://blog.mikecouturier.com/2011/07/create-zoomable-images-using-google.html

Thanks

Immoral answered 4/7, 2011 at 11:58 Comment(3)

will this allow pinch zooming on an iPad? – Cornelison 5/7, 2011 at 12:57

yes just like on maps.google.com But my samples aren't designed to run in full screen on an iPad so the result may vary. But it is definitely possible! – Immoral 5/7, 2011 at 21:9

I don't need full screen so that would be fine :) – Cornelison 6/7, 2011 at 14:5

M

2

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.

Mimesis answered 2/6, 2011 at 0:3 Comment(0)

Recommended topics

Hot tags