Google map scrolls when scrolling down the page on mobile

JavaScript
1

I’m putting a site together with a full width google map, its fine on a pc as you can use the scrollbar, but in mobile view, as you scroll down you cant scroll any further down the page as the map takes over.

There no in-line script as it seems to be through the link below

And this is my map code -

<div class="container-full clearfix">
<div class="map maps">
<iframe width="100%" height="500" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2470.066081107125!2d-1.2616315843843222!3d51.75011520074875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s16+%26+17+St+Ebbes+Street%2C+Oxford%2C+OX11PT!5e0!3m2!1sen!2suk!4v1473075021572" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
</div>

This is the site - http://www.biosportsuk.co.uk/site/index.php

2

Only when the map has focus. then the maps zoom happens.

I can’t think of anyway to allow both page scroll and map zoom and differentiate between the two other than users knowing where to put focus based on their intent.

3

Hi, ye Im glad you said that as that was what i was thinking…

4

It looks like there is a way with version 3

i.e. if you set scrollwheel to false
Unless you have script to toggle the boolean users would need to use the maps zoom control but IMHO even that would be better than how it is now.

5

Cheers for sticking with it,

You mean into the iframe is it

<iframe width="100%" height="500" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2470.0660494479293!2d-1.2616764842395358!3d51.75011577967576!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c6bab668f12b%3A0xed497fa51eecbffc!2sPureGym+Oxford+Central!5e0!3m2!1sen!2suk!4v1473797933067" marginwidth="0" marginheight="0" scrolling="no" scrollwheel="false"></iframe>

I dont think it worked, thats why I am asking sorry

6

scrollwheel is a property of the MapOptions object, not an iframe attribute.

I don’t know, but I’m guessing something like this would have a better chance of working.

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2470.0660494479293!2d-1.2616764842395358!3d51.75011577967576!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c6bab668f12b%3A0xed497fa51eecbffc!2sPureGym+Oxford+Central!5e0!3m2!1sen!2suk!4v1473797933067&scrollwheel=false"
7

Ah I see, and yes tried it and it didnt do the business I’m afraid.

Like you say its a tough one as the 2 scrolls going on.

8

You would need to embed the map with the API (register for a key) rather than an iframe and then you could simply set the scrollwheel to false to avoid the problem.

If you must use an iframe then you should allow a gutter around the edge of about 32px so that touch users can get out of the map otherwise on a map that fills the viewport they are forever stuck in the map.:). You can do this with media queries for smaller screens but of course tablets are quite large these days and are touch enabled also so maybe better to detect touch with js and add a class to the html element and then use that class to create a gutter around the map.

1 Like
9

I’ve done as @PaulOB suggests as i had the same problem. I just have a bit of a border that someone can get a finger on to move past.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.