Prevent map zoom on scroll

index.html

<div id="map_wrapper">
  <iframe id="map_canvas"></iframe>
</div>

main.js

// Iframe wrapper ID set to #map_wrapper
// Iframe ID set to #map_canvas

// Prevent map zoom on scroll
// Enable the pointer events only on click

// Disable pointer events on doc ready
$('#map_canvas').addClass('scroll-off'); 

// Enable pointer events on #map_wrapper click
$('#map_wrapper').on('click', function () {
    $('#map_canvas').removeClass('scroll-off'); 
});

// Disable pointer events when the mouse leaves #map_canvas
$("#map_canvas").mouseleave(function () {
    $('#map_canvas').addClass('scroll-off'); 
});

style.css

.scroll-off {
  pointer-events: none;
}