Disable Mouse Scroll Wheel Zoom On Google Map iframes

File Size:0.78 KB
Views Total:225
Last Update:December 25, 2017
Publish Date:December 25, 2017
Official Website:Go to website
License:MIT

hello friends some time we are use google map in web pages, but when user page scroll down on map the mouse react on zoom & not scroll down to next section page. so we are a little bit modify with help of jquery & disable scroll on google map. user page scroll on mouse hover on google map then easily to scroll down & need to map  zoom area  then click on google map.

How to use :

1. Use Google iframe with embed code :

<div class='embed-container  maps'>
   <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d219174.5263379301!2d75.78740196166724!3d30.869816902843954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1461045968872" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

2. Use CSS :

.maps iframe{
    pointer-events: none;
}

3. Add jquery script :

$(document).ready(function() {
    $('.maps').click(function () {
        $('.maps iframe').css("pointer-events", "auto");
    });
    
    $( ".maps" ).mouseleave(function() {
      $('.maps iframe').css("pointer-events", "none"); 
    });
 });

Done 🙂