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.

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.

• javascript
• google-maps
• google-maps-api-3

• See also here: coderwall./p/pgm8xa/… – Yo Ludke Commented May 15, 2015 at 10:13

2 Answers 2

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.)

The answer of josh3736 helps me, thank's for that. I would like to extend it with my solution:

First thing I did, I added a #overlay div like mentioned by josh3736.

Then I implemented a little jQuery Script to detect if the user is doing something or in idle-mode:

// jQuery Idle
idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {
    $(document).ready(function () {
        $('*').bind('mousemove keydown scroll', function () {

        clearTimeout(idleTimer);

        if (idleState == true) { 
            // Reactivated event
            $('html').removeClass('idle');
            $('html').addClass('no-idle');
        }

        idleState = false;
        idleTimer = setTimeout(function () {
            // Idle Event
            $('html').addClass('idle');
            $('html').removeClass('no-idle');
            idleState = true; }, idleWait);
        });
        $("body").trigger("mousemove");
    });
}) (jQuery)

As you can see, the script is adding classes to html: idle and no-idle.

After that I added the following CSS-Snipet:

#map-overlay {
    display: none;
    position: absolute;
    z-index: 500;
}

.idle #map-overlay {
    display: block;
}

So as you can see, the idea is that the user can use the map function as soon as he no longer idles. And due to the fact, that idling starts after scrolling, it works like a charm with touch devices.

Hope this helps.