Obscure a google maps embedded iframe so one can scroll/pan on it without affecting the map unless we click or tap the map to activate it.

scroll-over-map.html

<div class="map embed-container">
	<div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
	<div class="map-overlay" style="display: block;"></div>
	<iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

the-script.js

//using jquery...
var onMapMouseleaveHandler = function (event) {
	$('#map-notice').fadeIn(500);
	var elemento = $$(this);
	elemento.on('click', onMapClickHandler);
	elemento.off('mouseleave', onMapMouseleaveHandler);
	$('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
	$('#map-notice').fadeOut(500);
	var elemento = $$(this);
	elemento.off('click', onMapClickHandler);
	$('.map-overlay').fadeOut(500);
	elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

the-style.css

.map.embed-container {
	position:relative;
}

.map.embed-container #map-notice{
	position:absolute;
	right:0;
	top:0;
	background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
	background-color: rgba(0,0,0,.50);
	color: #ccc;
	padding: 8px;
}
.map.embed-container .map-overlay{
	height:100%;
	width:100%;
	position:absolute;
	z-index:9999;
	background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

Man, that was exactly what I was needing. Thanks!