JSFiddle - React, Tailwind, and code Playground

by Viktor L

HTML

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy"
        async
        data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A0INpMJ4rkMDs1BKJk6vodzxrTkrhodFp&amp;width=600&amp;height=450&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

CSS

.map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(https://vchemraznica.ru/wp-content/uploads/2016/10/yan522.jpg);
        background-position: center center;
    }

JavaScript

let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//запуск один раз, и удаление наблюдателя сразу
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }