Всем привет. Есть задача: загружать яндекс карту по клику на определенный контейнер, он же 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ей версии, может есть какие-то нюансы?