CODEWITHSUNDEEP
javascriptgoogle-mapsmobile
Brad Birdsall
Brad Birdsall

Reputation: 1743

How can I disable scrolling on the Google Maps mobile layout?

I am developing mobile sites with Google Maps embedded via the Google Maps API. I have been able to stop certain types of behavior but have been unable to find a good way to stop the map from scrolling as I finger scroll down the page on the iPhone. Here is the code I am using:

<script>
function initialize() {
  var mapElem = document.getElementById("map"),
      myOptions = {
        zoom: 13,
        center: new google.maps.LatLng(41.8965,-84.063),
        navigationControl: true,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL,
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        streetViewControl: false,
        mapTypeControl: false,
        disableDoubleClickZoom: true,
        scrollwheel: false,
        backgroundColor: '#f2efe9',
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(mapElem, myOptions);
}
</script>
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=initialize'></script>

Thanks in advance.

Upvotes: 34

Views: 72302

Answers (8)

brainsexyapril
brainsexyapril

Reputation: 51

Add this to your myOptions list:

gestureHandling: 'cooperative'

This is from the Google Maps JS API documentation. I implemented a similar functionality on my mobile maps web app.

Upvotes: 5

Pablo C. Garc&#237;a
Pablo C. Garc&#237;a

Reputation: 22394

In your css:

    pointer-events: none;

Upvotes: 9

Victor Catalin Torac
Victor Catalin Torac

Reputation: 29

i am a newb, so i give an noob answer:

try putting the width at 90%, so you allow space for the finger to go down and up witout touching the map.

For me it worked :)

Upvotes: 1

Mantar
Mantar

Reputation: 2720

draggable: false

As stated in the API

Upvotes: 39

Frankey
Frankey

Reputation: 3757

Validate whether ontouchend is available in document. 

var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);

Upvotes: 54

Steve Porter
Steve Porter

Reputation: 1

This is how I solved it with media query responsive techniques.

HTML at the footer of the page (just above </body>):

<div class="jrespond"></div>

CSS:

.jrespond{
  width: 30px;
}

@media only screen and (max-width: 991px){
  .jrespond{
    width: 20px;
  }
}

@media only screen and (max-width: 767px){
  .jrespond{
    width: 10px;
  }
}

JavaScript:

if(jrespond == 10){
  // Do mobile function
}

if(jrespond == 20){    
  // Do tablet function
}

if(jrespond >= 30){
  // Do desktop function
}

**/// Google** map snippet
var isDraggable = true;
if(jrespond == 10){
  var isDraggable = false;
}

var myOptions = {    
  zoom: 12,
  center: myLatlng1,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  draggable: isDraggable
}

Upvotes: 0

Mike
Mike

Reputation: 2735

You can also try a) a server side mobile detection liked mentioned here and then b) include it in your .php (e.g. header.php or footer.php) file, like so:

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

Embed it in your code:

var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(12.345, 12.345),
        scrollwheel: false,
        <?php echo(isMobile()) ? 'draggable: false' : ''; ?>
    };

Note that this of course only works if you have Google Maps Javascript code embedded in your php file.

Upvotes: 7

tommycode
tommycode

Reputation: 163

I had the same problem and found the answer in another StackOverflow question. That solution worked for me with my map on my Android using Chrome at least.

Embed Google Maps on page without overriding iPhone scroll behavior

Upvotes: 0

Related Questions