dio-v
11/18/2014 - 9:41 AM

disable google maps scrolling enable by clicking / disable by mouseOut

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;
    });