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…

 

 

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,angle brackets,configurable settings,core code,CSS,CSS 3,CSS 4,CSS framework,css3,disabled zoom,doctype html,elements,free open source,Google Map API,Google maps javascript API,GoogleMap,graphical user interface,html and xhtml,html basics,html5,javascript,javascript functions,jquery,mobile,mouse event,mouse events,mouseevent,open source javascript,page elements,pointer-events,style,transparent background image,visual transition,zoomWeb 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.