disable google maps scrolling enable by clicking / disable by mouseOut
.mapBlock{
position:absolute;
width:100%;
height:100%;
display:block;
z-index:9999;
img{
width:100%;
height:100%;
position:relative;
display:block;
}
&:hover{
border:none !important;
}
}
<iframe class="googleMap" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2452.9339231859217!2d5.1017671!3d52.0627268!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c66594fc7c4e03%3A0x9acde3721f81a468!2sZeelantlaan+31%2C+3526+AK+Utrecht!5e0!3m2!1snl!2snl!4v1416300254188" width="1020" height="400" frameborder="0" style="border:0"></iframe>
//first add class 'googleMap' to iframe
$('.googleMap').parents('.row').first().addClass('wide').css({'position':'relative'}).prepend('<a href="#" class="mapBlock"><img src="/img/1x1.gif" alt="click first to scroll-zoom" ></a>');
// Disable scroll zooming and bind back the click event
$('.mapBlock').on('click', function () {
var vT = $(this);
vT.hide();
$('.googleMap').on('mouseleave', function () {
vT.show();
});
return false;
});