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>
