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:

enter image description here

3 Answers 3


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

  • i don't understand... the question you linked is to have draggable map only with "pinch" ? (that is a good solution) Jun 25, 2016 at 9:17
  • The question I linked is the only code reference I could find, which I thought might solve your problem. Jun 27, 2016 at 5:44

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.

  • this is also a good idea but i have many doubt.... to have a draggable map i will put a button "Press to Open" (what do you mean with press to open? maybe is not correct for uxd, maybe "Open to move the map" ?) or press the static map (what do you mean witj long-press ?)... and the draggable map it will be in new page/window ? Jun 25, 2016 at 9:13

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
  • yes this a way... but is not the best if for user is important to have a draggable map and full control.... (for example i have markers in all map) Jun 22, 2016 at 0:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.