makc9I
@makc9I
фрилансер, web разработчик

Как загрузить яндекс карту по клику?

Всем привет. Есть задача: загружать яндекс карту по клику на определенный контейнер, он же div.
Изначально карта была создана через конструктор, и в таком виде и хотелось её грузить.
Использую для этого элемент script. Вот мой код (за мешанину с jquery сорри, привык с ним работать):
$(document).on('click', '.load-map-on-click', function(event) {
		$(this).empty();
		$(this).removeClass('load-map-on-click');
		
		let script = document.createElement('script');
		script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A4d23883ddbd16297510daf686fe08f26396695df3933ee6708db4c85037cc038&width=100%25&height=540&lang=ru_RU&scroll=false';
		$(this).append(script);
		
	});

Этот код как-будто бы работает, но консолька выдает iframe yandex... BLOCKED, и карта не появляется.
Хотя она как-будто бы выдает это и при обычном использовании скрипта из конструктора, но при этом карта на месте.
Хотел я идти другим путем, подключать АПИ яндекс карт, сгенерировал ключ, но Апи упорно не хочет подключаться, выдает ошибку ymaps3 is not defined. 2ая версия спокойно подключается, 3ья ни в какую.
Делал всё по инструкции. В head ссылку на скрипт с моим апи ключом. В скриптах этот код:
initMap();

async function initMap() {
    // Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API
    await ymaps3.ready;

    const {YMap, YMapDefaultSchemeLayer} = ymaps3;

    // Иницилиазируем карту
    const map = new YMap(
        // Передаём ссылку на HTMLElement контейнера
        document.getElementById('map'),

        // Передаём параметры инициализации карты
        {
            location: {
                // Координаты центра карты
                center: [37.588144, 55.733842],

                // Уровень масштабирования
                zoom: 10
            }
        }
    );

    // Добавляем слой для отображения схематической карты
    map.addChild(new YMapDefaultSchemeLayer());
}


Вот, вопросы такие, что я делаю не так в попытке подключить скрипт из конструктора методами JS?
И что не так с подключением ymaps API 3ей версии, может есть какие-то нюансы?
  • Вопрос задан
  • 106 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы