lazy yandex map init

Source:

Демо:

Плагины:

Подключение:

//

Разметка:

//

Стили:

//

Инициализация:

// helpers/loadScript.js

export default function loadScript(src, callback) {
    let script = document.createElement("script");
    script.src = src;

    script.onload = () => callback(null, script);
    script.onerror = () => callback(new Error(`Script load error for ${src}`));

    document.head.append(script);
}


// modules/map-contacts.js

import loadScript from "../helpers/loadScript";

function init() {
    $(".map-contacts").each(function () {
        const $root = $(this);

        const { id, center, hint, pinUrl, pinSize } = $root.data();

        const myMap = new ymaps.Map(id, {
            center,
            controls: ["zoomControl"],
            zoom: 15,
        });

        const myPlacemark = new ymaps.Placemark(
            center,
            {
                hintContent: hint,
                balloonContent: hint,
                iconContent: "",
            },
            {
                // Опции.
                // Необходимо указать данный тип макета.
                iconLayout: "default#image",
                // Своё изображение иконки метки.
                iconImageHref: pinUrl,
                // Размеры метки.
                iconImageSize: pinSize,
                // Смещение левого верхнего угла иконки относительно
                // её "ножки" (точки привязки).
                iconImageOffset: [-pinSize[0] / 2, -pinSize[1]],
            }
        );

        myMap.geoObjects.add(myPlacemark);
        myMap.behaviors.disable("scrollZoom");
    });
}

const observer = new IntersectionObserver(
    (entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                if (typeof ymaps === "undefined") {
                    loadScript(
                        "https://api-maps.yandex.ru/2.1/?apikey=4ee83d51-9c82-4832-ae32-283ef606144b&lang=ru_RU",
                        function (error, script) {
                            if (error) {
                                console.error(error);
                            } else {
                                ymaps.ready(init);
                            }
                        }
                    );
                } else {
                    ymaps.ready(init);
                }

                observer.unobserve(entry.target);
            }
        });
    },
    {
        rootMargin: "0px 0px 2000px 0px",
        threshold: 0,
    }
);

$(function () {
    document.querySelectorAll(".map-contacts").forEach((element) => {
        observer.observe(element);
    });
});