7

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.

Community
  • 1
  • 1
Poni
  • 11,061
  • 25
  • 80
  • 121

2 Answers2

7

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

josh3736
  • 139,160
  • 33
  • 216
  • 263
  • I can't use a static map. Thanks. Other way than that "hack"? – Poni Sep 13 '12 at 01:35
  • I'm not aware of any way in the API to turn off map panning. I suppose you could try attaching event handlers to the map's internal elements' `touchstart`/`touchmove` and call `e.stopPropagation()`, but that's more hacky than just throwing a `
    ` on top.
     – josh3736 Sep 13 '12 at 01:45
1

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.

lufi
  • 610
  • 7
  • 29