Web Designer / Developer usually embed Google Maps using iFrame in most websites. But, page scrolling stuck when user use mouse scroll in Google map area, and now it is working as Map zoom in/out.

So, we always wonder that, “is there a way to disable the zoom via mouse scroll wheel on all of them using css or JavaScript?”

Answer is “Yes”, and here is powerful CSS’s property – POINTER-EVENTS.

 JQuery or JavaScript tricks for mobile devices

For this, I am wrapping the Google map’s iframe in a DIV. Default behavior of mouse in this DIV has been fixed to “pointer-events: none”. It will terminate the zoom-in or zoom-out property of Google iframe map through mouse wheel.

HTML

<div class="map-container">
  <iframe width="300" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=YOUR_CUSTOM_MAP_CODE"></iframe>
</div>

CSS

.map-container {
  width: 100%
}
.map-container iframe{
  width: 100%;
  display: block;
  pointer-events: none;
  position: relative;
  -webkit-backface-visibility: hidden;
}

So, need to fix it more user friendly; I will swap the Pointer-events property on Mouse-Click on the DIV containing iframe map. For this, we can use javaScript / jQuery.

Updated CSS

I am creating two different properties of DIV’s iframe. One is with default property of mouse wheel and another with restrictions.

.map-container {
  width: 100%
}
.map-container iframe{
  width: 100%;
  display: block;
  pointer-events: none;
  position: relative;
  -webkit-backface-visibility: hidden;
}
.map-container iframe.clicked{
  pointer-events: auto
}

jQuery / javaScript

Now, it’s jQuery turn. I am using addClass() and removeClass() functions on MouseClick() and MouseLeave() events to apply the class on iframe of DIV.

$('.map-container').on('click',function(){
    $(this).find('iframe').addClass('clicked')
})
  .mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

That’s it!

Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…

You can support this website by sharing. Thank you!