Loading a Yandex map on hover, plus a stub, a preview, is there a problem, how to solve it?

  • 0
    Hello everyone.

    Who put a stub on the Yandex card, stub a picture, when you hover the mouse, the Yandex maps are loaded.
    I think they understood what they are doing to make the site load faster.

    Output
    <div class="ymap-container">
    <div class="loader loader-default"></div>
    <div id="map-yandex"></div>
    </div>


    Js
    //Переменная для включения/отключения индикатора загрузки
      var spinner = $('.ymap-container').children('.loader');
    //Переменная для определения была ли хоть раз загружена Яндекс.Карта (чтобы избежать повторной загрузки при наведении)
    var check_if_load = false;
    //Необходимые переменные для того, чтобы задать координаты на Яндекс.Карте
    var myMapTemp, myPlacemarkTemp;
    
    //Функция создания карты сайта и затем вставки ее в блок с идентификатором &#34;map-yandex&#34;
    function init () {
      var myMapTemp = new ymaps.Map("map-yandex", {
        center: [56.026146, 92.905806], // координаты центра на карте
        zoom: 16, // коэффициент приближения карты
        controls: ['zoomControl', 'fullscreenControl'] // выбираем только те функции, которые необходимы при использовании
      });
      var myPlacemarkTemp = new ymaps.GeoObject({
        geometry: {
          type: "Point",
          coordinates: [56.026146, 92.905806] // координаты, где будет размещаться флажок на карте
        }
      });
      myMapTemp.geoObjects.add(myPlacemarkTemp); // помещаем флажок на карту
    
      // Получаем первый экземпляр коллекции слоев, потом первый слой коллекции
      var layer = myMapTemp.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;
    }
    
    // Функция загрузки API Яндекс.Карт по требованию (в нашем случае при наведении)
    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);
    }
    
    // Основная функция, которая проверяет когда мы навели на блок с классом &#34;ymap-container&#34;
    var ymap = function() {
      $('.ymap-container').mouseenter(function(){
        if (!check_if_load) { // проверяем первый ли раз загружается Яндекс.Карта, если да, то загружаем
    
          // Чтобы не было повторной загрузки карты, мы изменяем значение переменной
          check_if_load = true; 
    
          // Показываем индикатор загрузки до тех пор, пока карта не загрузится
          spinner.addClass('is-active');
    
          // Загружаем API Яндекс.Карт
          loadScript("https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;loadByRequire=1", function(){
            // Как только API Яндекс.Карт загрузились, сразу формируем карту и помещаем в блок с идентификатором &#34;map-yandex&#34;
            ymaps.load(init);
          });                
        }
      }
                                     );  
    }
    $(function() {
      ymap();
    });


    Css
    .ymap-container {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      background: url(/media/img/map.jpg) #fafafb no-repeat;
      background-position: center center;
      background-size: cover
    }
    #map-yandex {
      position: relative;
      z-index: 7;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background-color: transparent
    }
    .loader {
      position: absolute;
      z-index: 15;
      top: -100%;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden;
      color: #000;
      -webkit-transition: opacity .7s ease;
      transition: opacity .7s ease;
      opacity: 0;
      background-color: rgba(0, 0, 0, .55)
    }
    .loader:after,
    .loader:before {
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }
    .loader.is-active {
      top: 0;
      opacity: 1
    }
    .loader-default:after {
      position: absolute;
      top: calc(50% - 24px);
      left: calc(50% - 24px);
      width: 48px;
      height: 48px;
      content: '';
      -webkit-animation: rotation 1s linear infinite;
      animation: rotation 1s linear infinite;
      border: solid 8px #fff;
      border-left-color: transparent;
      border-radius: 50%
    }
    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
      }
    
      to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
      }
    }
    @keyframes rotation {
      from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
      }
    
      to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
      }
    }
    @-webkit-keyframes blink {
      from {
        opacity: .5
      }
    
      to {
        opacity: 1
      }
    }
    @keyframes blink {
      from {
        opacity: .5
      }
    
      to {
        opacity: 1
      }
    }


    The question is about the picture, I have an adaptive block, I need the picture to be shown 100%.
    And if you set 100% in css, it is not shown at all.

    Responsible for the image display size.
    #map-yandex {
      position: relative;
      z-index: 7;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background-color: transparent
    }


    I've already done this min-height: 100% ; and it is not visible, if PX is set then it is visible, but px will not work, because there is an adaptive block.
    JavaScript Caroline Pena, May 26, 2019

  • 1 Answers
  • 0
    solved the problem:



    .ymap-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: url(/media/img/map.jpg) #fafafb no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    }
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!