alert users that clicking on the button takes the scroll?

Question

i have a big problem for mobile users:

i have a google maps that has a width 100% (or less some pixel), if i touch the screen on the map the scroll is inside the map and not scroll of window...

So to have a scroll on winwow i had put the width of map less 100%... In this way i have a small right border where if the user touch can scroll the window.

However is too difficult do understand for all users, so maybe i think is better to put a "button" with a bottom arrov in a corner of map, where if is clicked takes a small scroll of window.

But in the corners of google maps are many thinghs (console, button, logo of google)... so how can to solve this problem ? what icon i can use ?

Maybe another way ?

I hope you can help me (sorry for my english).

This a screenshot:

Answer 1

The solution might be having pinch to zoom option(with two fingers) for maps. When one finger is used only page scroll should happen. Most mobile users I came across uses one finger to scroll and pinch(with two fingers) to zoom. This may also be a better solutin https://stackoverflow.com/questions/15327783/enable-scrollwheel-zooming-on-a-map-upon-click-using-google-maps-api

Answer 2

I would recommend the reverse of what you described. Instead of having a button that allows you to scroll, show a static map, as Brett East described, with a caption/button of something like "Press to Open".

In order to control the map, the user can press (or long-press) on the static map, which links to a new view with full-screen zoomable/draggable map with full control. The new view should have a way for the user to go back to the previous screen.

Answer 3

I completely understand the problem that you have, it can me quite common on mobile devices. My recommendation would be to not add the padding down the right, and instead make the map not drag or zoom on scroll at certain widths or for touch devices. Here is a link to a good article on the matter https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout

Here is the important bit from the article, where the javascript for creating the map is:

function initMap(){
    var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false

    var mapOptions = {
        draggable: isDraggable,

        scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
        //... options options options
    };
}

This will stop the map from being dragged or zoomed on scroll.

You can change this bit if you want zoom on scroll at larger screen sizes too:

function initMap(){
    var isDragZoom = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDragZoom= true, else isDragZoom = false

    var mapOptions = {
        draggable: isDragZoom,

        scrollwheel: isDragZoom, // Prevent users to start zooming the map when scrolling down the page at the small width
        //... options options options
    };
}