JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ&amp;sensor=false"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="canvas_wrapper">
    <p class="text-center">Scroll down to reach the map 
        <i class="fa fa-arrow-down"></i>
    </p>     
    <section id="canvas">              
            <div id="map_canvas"></div>
    </section>
    <p class="text-center">You can see that the scroll doesen't work 
        <i class="fa fa-arrow-up"></i>
    </p>
    <p class="text-center">Now click on MAP and start using the mouse wheel
       <i class="fa fa-hand-o-up"></i>
        <br/>
        Notice that if the mouse leave the MAP area, you need to click again on the map canvas to use the pointer events
    </p>
</div>

CSS

.canvas_wrapper{
    height: 2000px;
}
#canvas{
    background-color: red;
    margin-top: 500px;
}
#map_canvas{
    height:200px;
    width:100%;
}

.scrollof{
    pointer-events: none;
}

JavaScript

function initialize() {
		var myLatlng = new google.maps.LatLng(46.769603, 23.589957);
		var mapOptions = {
			center: new google.maps.LatLng(46.769603, 23.589957),
			zoom: 12,
			scrollwheel: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
			mapOptions);

		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			icon: 'http://www.osbeauty.com/wp-content/uploads/2014/01/ico-01_v2.png',
			title: 'Any Title'
		});


	}
	google.maps.event.addDomListener(window, 'load', initialize);


$( document ).ready(function() {
    $('#map_canvas').addClass('scrollof');
    $('#canvas').on('click', function() {
    	$('#map_canvas').removeClass('scrollof');
    });
    $( "#map_canvas" ).mouseleave(function() {
    	 $('#map_canvas').addClass('scrollof');
    });

});