Ленивая загрузка нескольких Я.карт на одной странице

Возникла потребность переписать код подключения Я.карт, т.к. низкая скорость загрузки страниц. На 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. Подскажите, пожалуйста, в чем ошибка? Может есть идеи как загрузить несколько карт при наведении?


Ответы (0 шт):