febridev/iframe.html

## iframe.html
<!DOCTYPE html>
<html>
<head>
<style>
    .scrolloff {
        pointer-events: none;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#map').addClass('scrolloff');                // set the mouse events to none when doc is ready

        $('#overlay').on("mouseup",function(){          // lock it when mouse up
            $('#map').addClass('scrolloff');
            //somehow the mouseup event doesn't get call...
        });
        $('#overlay').on("mousedown",function(){        // when mouse down, set the mouse events free
            $('#map').removeClass('scrolloff');
        });
        $("#map").mouseleave(function () {              // becuase the mouse up doesn't work...
            $('#map').addClass('scrolloff');            // set the pointer events to none when mouse leaves the map area
                                                        // or you can do it on some other event
        });

    });
</script>
</head>
<body>
<div id="overlay" class="map">
    <iframe id="map" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
    &q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.scrolloff {
	pointer-events: none;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script>
	$(document).ready(function () {
	$('#map').addClass('scrolloff'); // set the mouse events to none when doc is ready

	$('#overlay').on("mouseup",function(){ // lock it when mouse up
	$('#map').addClass('scrolloff');
	//somehow the mouseup event doesn't get call...
	});
	$('#overlay').on("mousedown",function(){ // when mouse down, set the mouse events free
	$('#map').removeClass('scrolloff');
	});
	$("#map").mouseleave(function () { // becuase the mouse up doesn't work...
	$('#map').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	// or you can do it on some other event
	});

	});
	</script>
	</head>
	<body>
	<div id="overlay" class="map">
	<iframe id="map" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
	&q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
	</div>

	</body>
	</html>