Question

I use JQuery. I use google maps api v3.

Now, on my iPhone I can’t scroll down the page if I put my finger at the map’s area.

draggable : false in the map’s options does not work. It just stops the map from moving within.

Found these similar questions but couldn’t get the answer out of them:

How can I disable scrolling on the Google Maps mobile layout?

Embed Google Maps on page without overriding iPhone scroll behavior

Google Maps API; Suppress Map Panning to enable Page Scrolling

Any simple way to do that? It simply looks like Google did that on purpose! (obviously not)

Edit #1:
I can’t use a static map.

Answer 1

Putting a transparent <div> on top of the map’s <div> should do the trick.

Alternatively, just use the Static Maps API if you don’t want any kind of interactivity. (It’s much more lightweight since all you’re embedding is an image.)