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

Question

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

Answer 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
}

Answer 2

In your css:

    pointer-events: none;