Ленивая загрузка нескольких Я.карт на одной странице
Возникла потребность переписать код подключения Я.карт, т.к. низкая скорость загрузки страниц. На 1 странице размещено несколько карт в табах. Я нашла вариант загрузки Яндекс.Карты при наведении. Все супер, но у меня только одна карта подгружается. Вот код:
var spinner = $('.map').children('.loader');
var check_if_load = 0;
var stm1, stp1,dmm1,dmp1,dmm2,dmp2,dmm3,dmp3;
function init () {
var stm1= new ymaps.Map("st1", {
center: [54.881812464283165,38.0603104576721],
zoom: 16,
controls: ['zoomControl', 'fullscreenControl']
});
var dmm1 = new ymaps.Map("dm1", {
center: [56.34627478005328,37.51901799999997],
zoom: 16,
controls: ['zoomControl', 'fullscreenControl']
});
var dmm2= new ymaps.Map("dm2", {
center: [56.2902159340379,37.48652599999996],
zoom: 16,
controls: ['zoomControl', 'fullscreenControl']
});
var dmm3 = new ymaps.Map("dm3", {
center: [56.377557783795204,37.33163117993159],
zoom: 16,
controls: ['zoomControl', 'fullscreenControl']
});
var stp1 = new ymaps.Placemark([54.882499,38.060289], {
hintContent: 'адрес 1',
balloonContent: 'адрес 1',
}, {
iconLayout: 'default#imageWithContent',
iconImageSize: [50, 50],
iconImageOffset: [-25, -50],
});
var dmp1 = new ymaps.Placemark([56.346871,37.519018], {
hintContent: 'адрес 2',
balloonContent: 'адрес 2'
}, {
iconLayout: 'default#image',
})
var dmp2 = new ymaps.Placemark([56.290729,37.486526], {
hintContent: 'адрес 3',
balloonContent: 'адрес 3',
}, {
iconLayout: 'default#imageWithContent',
iconImageSize: [50, 50],
iconImageOffset: [-25, -50],
});
var dmp3 = new ymaps.Placemark([56.377996,37.331603], {
hintContent: 'адрес 4',
balloonContent: 'адрес 4'
}, {
iconLayout: 'default#imageWithContent',
iconImageSize: [50, 50],
iconImageOffset: [-25, -50],
})
stm1.geoObjects.add(stp1);
dmm1.geoObjects.add(dmp1);
dmm2.geoObjects.add(dmp2);
dmm3.geoObjects.add(dmp3);
//Получаем первый экземпляр коллекции слоев, потом первый слой коллекции
var layer = stm1.layers.get(0).get(0); //Решение по callback-у для определния полной загрузки карты
waitForTilesLoad(layer).then(function() {
//Скрываем
spinner.removeClass('is-active');
});
}
function waitForTilesLoad(layer) {
return new ymaps.vow.Promise(function (resolve, reject) {
var tc = getTileContainer(layer), readyAll = true;
tc.tiles.each(function (tile, number) {
if (!tile.isReady()) {
readyAll = false;
}
});
if (readyAll) {
resolve();
} else {
tc.events.once("ready", function() {
resolve();
});
}
});
}
function getTileContainer(layer) {
for (var k in layer) {
if (layer.hasOwnProperty(k)) {
if (
layer[k] instanceof ymaps.layer.tileContainer.CanvasContainer
|| layer[k] instanceof ymaps.layer.tileContainer.DomContainer
) {
return layer[k];
}
}
}
return null;
}
function loadScript(url, callback){
var script = document.createElement("script");
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Другие браузеры
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var ymap = function() {
$('.map').mouseenter(function(){
if (check_if_load == 0) {
check_if_load = 1;
spinner.addClass('is-active');
loadScript("https://api-maps.yandex.ru/2.1/?lang=ru-RU&apikey=..", function(){
ymaps.load(init);
});
}
}
);
}
$(function() {
ymap();
});
Подгружается только первая карта #stm1. Подскажите, пожалуйста, в чем ошибка? Может есть идеи как загрузить несколько карт при наведении?