admin 管理员组

文章数量: 1086019

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
Share Improve this question edited May 23, 2017 at 11:44 CommunityBot 11 silver badge asked Sep 13, 2012 at 1:09 PoniPoni 11.3k28 gold badges83 silver badges125 bronze badges 1
  • See also here: coderwall./p/pgm8xa/… – Yo Ludke Commented May 15, 2015 at 10:13
Add a ment  | 

2 Answers 2

Reset to default 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.)

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.

本文标签： javascriptgoogle maps hijacked iphone39s scrolling (touch events)how to bring backStack Overflow

版权声明：本文标题：javascript - google maps hijacked iphone&#39;s scrolling (touch events) - how to bring back? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744048003a2524487.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。