Here we learn about how to disable the scroll effect on the map using CSS and Jquery.

Here is an example of code for disabling scroll on mouse scroll.

<html>
  <body>
    <style>
    .scrolloff {
      pointer-events: none;
    }
    </style>
    <div id="googlemap" class="map">
      <iframe id="gmap" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
      &q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
    </div>

    <script>
      $( document ).ready( function () {
        $( '#gmap' ).addClass( 'scrolloff' );
         
        $( '#googlemap' ).on( 'mouseup', function(){
          $( '#gmap' ).addClass( 'scrolloff' );
        });
        $( '#googlemap' ).on( 'mousedown', function(){
          $( '#gmap' ).removeClass( 'scrolloff' );
        });

        $( '#gmap' ).mouseleave( function () {
          $( '#gmap' ).addClass( 'scrolloff' );
        });				   
      });
    </script>
  </body>
</html>
Footer Logo

Subscribe

Select Categories