Google Map Disable Scroll Not Working in Mobile

Hey Guys!

We're actually having this issue with multiple sites but I'm sending this one as an example because it's still in production (you'll see it still looks pretty rough overall!) so it was a convenient site to use for troubleshooting. I have scrolling disabled for the Google Maps plugin and it works at desktop but does not work at mobile - we've tested on both Androids and iPhones and scrolling isn't disabled for either.

I did try disabling all other plugins and enabling a stock WP theme (Twenty Seventeen) and it had the same issue. WordPress and the plugins are all up to date.

I granted support access - any help would be appreciated! Thank you so much!

Thanks!!
Jessica

  • Denitsa
    • WordPress Warrior

    Hello there Sean Christman,
    I hope you're doing great!

    Strangely I could not get that issue while viewing your website (I'm talking about the Contacts page) on an Android phone and neither could a colleague of mine whom I asked to test too. Iphone emulators also show everything fine - map isn't scrolling, the page itself is.

    Could you please elaborate more on the issue so I could try and replicate it correctly?

    Looking forward to hearing back!
    Cheers,
    Denitsa

  • Sean Christman
    • Flash Drive

    Hmm - on all of our phones the map itself is scrolling. Here is a list of the devices we've viewed it on:

    iPhone 5c
    iPhone 6s
    iPhone 7+
    Samsung Galaxy S5
    Samsung Galaxy S7

    The map is just scrolling as if scrolling weren't disabled at all.

    Thanks!!
    Jessica

  • Denitsa
    • WordPress Warrior

    Hello there Jessica,
    I hope you're having a beautiful day!

    Since I can't really replicate what you're having, I'll have to take a shot in the dark here. I added the following shortcode to explicitly disable scrolling
    [map id="1" disable_scroll="true"]

    How's it working now?

    Also, could you perhaps make a video recording of the page's behaviour, upload it somewhere, like GoogleDrive or DropBox and link it in your next post?

    I'm linking here one I made on my Android.
    https://drive.google.com/open?id=0B2EnFKmUi1FUZG9NRWVWZldPaTA

    As you can see, the map is not scrollable. Only if you tap on the map area itself it becomes draggable which is the normal behaviour, but it does not scroll with the page.

    Let me know how it goes.
    Cheers,
    Denitsa

  • Sean Christman
    • Flash Drive

    Hey Denitsa!

    Maybe this will help - this is another of our sites that's using the same Google Maps plugin with scrolling disabled - on this one, if you try to scroll on the map on mobile it goes dark and gives you a message that you need to use two fingers to scroll: http://landsculpt.slamdotpreview.com/contact/

    We were under the impression that this was the correct behavior when scrolling was disabled on mobile - it seems to us to work much better that way. Any idea why the behavior in the sites is different and how we can get the plugin to work consistently (requesting two finger scrolling) across all of our sites?

    Thanks!!
    Jessica

  • Denitsa
    • WordPress Warrior

    Hey there Jessica!
    Hope you're doing great!

    I can clearly see the difference in behaviour here - thanks for clarifying!

    What you're having on http://landsculpt.slamdotpreview.com/contact/ (the graying out and "Use two fingers..." ) is actually behaviour associated with the Google Maps API Scrolling and Panning (that's called Gesture Handling). The page is giving the error "Google Maps API warning: NoApiKeys" which means you need to set an API key via the dashboard of this site and the behaviour is going to be the same as on the http://mclain.slamdotdemo.com/contact/ page.

    You can set an API key anytime via Dashboard -> Settings -> Google Maps -> Options. There's a field called Google maps API key where you enter your API key from Google. Underneath it there's a link where you can get one.

    Keep in mind that without the API key you will not be able to use features such as geo-location and distance calculations with the Google Maps.

    I hope this was helpful! If you have any additional issues, please let us know and we'll be happy to help.

    Cheers,
    Denitsa

  • Sean Christman
    • Flash Drive

    Hey Denitsa,

    Thank you for clarifying - we find this really confusing though; the scroll-with-two-fingers behavior seems, to us, to be far superior on mobile - the whole idea of disabling scrolling is mainly so that users on mobile, with smaller screens, will be able to easily scroll down the page without getting "caught" by the map, which scrolls within the map and doesn't scroll down the page. The non-API key performs this function perfectly.

    The "correct" behavior, when an API key *is* installed, doesn't actually seem to perform this function. The map isn't frozen from scrolling (like it is on the desktop version when scrolling is disabled) and users who flick their finger over the map trying to scroll down the page will get "caught" scrolling within the map box.

    Do you have any suggestions for solving this issue while still keeping the benefits of having an API key entered?

    Thanks!!
    Jessica

  • Panos
    • SLS

    Hi Jessica,

    I have attached modified file
    wp-content/plugins/wpmu_dev_maps_plugin/js/user/google-maps.min.js

    which you can download, unzip and upload on your server. In the attached file I have inserted the following arguments :
    scrollwheel: false,navigationControl: false,mapTypeControl: false,scaleControl: false,draggable: false
    so the map won't be scrollable.

    Let us know if this works for you :slight_smile:

    Thanks!

  • Panos
    • SLS

    Hi Sean Christman ,

    Glad it's working!

    I'm afraid you'll have to repeat the replace in case of update as I don't think this feature is popular enough to be added, as maps are mostly preferred to be scrollable. In case of update you can always check the changelog before updating and see if this is included.

    I would suggest posting your request on our Features & Feedback forum explaining the reason you suggest such a feature.

  • Sean Christman
    • Flash Drive

    Thank you for your help Panos! I'll can post the request on the forum, for sure, but I guess this is my confusion - there's already a feature built in called "disable scroll" - I would think that anyone who actively enabled that option would want to disable scrolling, so it seems to me that the feature is already there, it just isn't working properly on mobile, so to me this seems more like a fix than a new feature - let me know if I'm misunderstanding!

  • Panos
    • SLS

    Hi Sean Christman ,

    The "Disable scroll" add-on uses the "scrollwheel" property which :

    If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.

    The feature you are referring to requires to modify the "draggable" property:

    If false, prevents the map from being dragged. Dragging is enabled by default.

    Hope this clears things a bit :slight_smile:

    Thanks!

  • Panos
    • SLS

    Hi Sean Christman ,

    After some discussion with colleagues, it seems that original intention was what you are describing in your request :slight_smile:

    So this is considered as a bug and I have made a report for this so it should be included in future release :slight_smile:

    Thanks allot for sticking on this one! I am sending some points your way as a token of appreciation!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.