Disable mouse scroll / wheel Zoom on embedded iframe Google Maps

HTML

CSS

.map-container {
  
}
.map-container iframe{
  
  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 {
  
}
.map-container iframe{
  
  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')
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: