Как убрать scroll google maps?

Question

[Александр Донов]

Ранее здесь уже поднимался вопрос, но у меня другая проблема.
Код карты исключительно iframe, поэтому через scrollwheel: false до него не добраться.
Думаю пустить div по верху, который исчезнет по клику или запретит scroll.
Как это реализовать?

Answer 1

[eSelf]

CSS:

.scrolloff {
        pointer-events: none;
    }

Javascript

$(document).ready(function () {
        $('#map1').addClass('scrolloff');
        $('#overlay').on('click', function () {
            $('#map1').removeClass('scrolloff'); 
        });
        $("#map1").mouseleave(function () {
            $('#map1').addClass('scrolloff'); /
        });
    });

HTML (нужно указать id для iframe)

<section id="overlay" class="map">
     <iframe id="map1" src="" width="1170" height="400" frameborder="0" style="border: 0"></iframe>
</section>

Теперь карта не будет скроллится, пока не кликнешь мышкой по ней. При перемещении мыши за пределы карты, скрол опять отключается.
Не работает для IE<11.

Answer 2

[Konstantinius]

Код на чистом js, если кому нужно:

document.addEventListener('DOMContentLoaded', () => {
    const overlay = document.querySelector("#overlay")
    const map = document.querySelector("#map1")

    if(map) {
        map.classList.add('scrolloff');
        overlay.addEventListener('click', () => {
            map.classList.remove('scrolloff')
        })

        map.addEventListener('mouseleave', () => {
            map.classList.add('scrolloff');
        })
    }
});