Geek Answers Handbook

Google maps hijacked iphone scrolling (touch events) - how to return?

I am using jQuery. I am using google maps api v3.

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

draggable : false in the map parameters does not work. It just stops moving the card.

Found these similar questions, but could not get the answer:

How to disable scrolling on Google Maps?

Paste Google Maps on the page without overriding iPhone scroll behavior

Google Maps API Suppress map panning to enable page scrolling

Any easy way to do this? It just looks like Google did it on purpose! (obviously not)

Edit # 1:
I can not use a static map.

+7
source share
2 answers

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

Alternatively, just use the Static Maps API if you don't want any interactivity. (This is much easier since all you embed is an image.)

+7
source

Josh3736's answer helps me, thanks for that. I would like to expand it with my solution:

The first thing I did was I added the #overlay div mentioned by josh3736.

Then I implemented a bit of jQuery Script to determine if the user was doing something or in standby 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, Script adds 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 is no longer idle. And due to the fact that the idle starts after scrolling, it works like a charm with touch devices.

Hope this helps.

+1
source

More articles:


All Articles