Лого SiteHere.ru

Оптимизация загрузки Яндекс.Карты на сайте — загрузка Яндекс.Карты при наведении

Оптимизация загрузки Яндекс.Карты на сайте - загрузка Яндекс.Карты при наведении

Оптимизируя скорость загрузки сайта на разных проектах, когда дело доходит до Яндекс.Карт, то здесь приходится искать непростые решения, чтобы загрузка карты не мешала загрузке HTML структуры. В этой статье я хочу поделиться с вами таким способом загрузки Яндекс.Карт, когда Яндекс.Карта загружается только при наведении, что значительно увеличивает скорость загрузки сайта и уменьшает количество запросов от карт Яндекса.

Видео, кстати, также очень сильно влияет на скорость загрузки. Поэтому рекомендую следующую статью, где вы узнаете о том, как сделать загрузку видео по клику:

Многие могут вспомнить GIF файлы, ведь они также очень большого размера. Чтобы их оптимизировать, лучше их также загружать только при клике. То есть, если человек хочет посмотреть полную GIF-анимацию, то он кликает на Play и смотрит, иначе не нужно тратить трафик пользователя на загрузку всего содержимого GIF файлов. Этот способ оптимизированной загрузки файлов описан в следующей статье:

Почему лучше всего загружать при наведении?

Чтобы не писать много текста, лучше всего показать на конкретных цифрах.

Вот все запросы от Яндекса, где карта загружается сразу после загрузки страницы (когда вы создали карту с помощью конструктора карт):

Обычный способ загрузки карт с помощью конструктора

Смотреть пример

Итог: 9 внешних скриптов и 44 изображения.

А вот количество запросов от Яндекса, когда мы загружаем только API карт Яндекса, а саму загрузку откладываем когда уже наведем:

Загрузка API Яндекс.Карт

Смотреть пример

Итог: 4 внешних скрипта и 5 изображений. Уже лучше, но ведь можно еще 😉 !

Ну и последний (наш оптимизированный пример) список запросов от Яндекса, когда даже API карт Яндекса загружаются после наведения:

Загрузка Яндекс.Карт только при наведении

Смотреть пример

Вот так лучше. Сейчас не загружается ни один лишний файл до тех пор, пока мы не наведем на саму карту.

Все загружаемые файлы можно отследить на вкладке Network (Сеть) в инструментах разработчика браузера Google Chrome. Но в Firefox есть аналогичный инструмент и вы можете проанализировать все запросы с помощью этого браузера.

К сожалению, реализация не такая простая, как кажется на первый взгляд… Все дело в том, что у Яндекс.Карт на данный момент нет callback-а о том, что карта загрузилась полностью. Но, как вы знаете, если тщательно искать, то проблему наверняка можно решить. И решение нашлось, но обо всем по порядку…

Как сделать оптимизированную загрузку Яндекс.Карт?

Как сделать загрузку Яндекс.Карты при наведении

Первым делом нам необходимо подключить библиотеку jQuery (можно и без нее), затем прописать стили для блока с картой, для индикатора загрузки, а после заставить это все работать в нужное время и в нужном месте. Чтобы разложить все по полочкам, будем все делать по этапам, а если останутся вопросы, то вы всегда сможете задать их ниже в комментариях.

1 этап. Подключаем необходимые скрипты

Из сторонних скриптов здесь только библиотека jQuery — скачать jQuery.

Подключаем перед закрывающим тегом </body>:

HTML КОД
1
<script src="js/jquery.min.js"></script>

2 этап. Разметка для карты

Сейчас нам необходимо создать структуру для дальнейшей вставки карты, а также индикатора загрузки, чтобы пользователь понимал что происходит:

HTML КОД
1
2
3
4
<div class="ymap-container">
    <div class="loader loader-default"></div>
    <div id="map-yandex"></div>
</div><!-- .ymap-container -->

Ничего сложного в данной структуре нет:

  • Блок с классом ymap-container — служит как "обертка" для блока с индикатором загрузки и блока с картой.
  • Блок с классами loader и loader-default — это наш индикатор загрузки.
  • Блок с идентификатором map-yandex — здесь появится карта Яндекса, когда мы наведем на "блок-обертку".

3 этап. Стили для блока с картой, а также для индикатора загрузки

Сейчас нам необходимо прописать стили для индикатора загрузки, а также для блока, где появится карта.

Индикатор загрузки, безусловно, играет очень важную роль. Иначе может возникнуть следующая ситуация: пользователь навел на блок, но ничего не происходит. Если у посетителя интернет-соединение слабенькое, то загрузка может затянуться, а если он не будет понимать того, что процесс идет, то решит, что карта просто не работает.

Но здесь есть еще один небольшой нюанс: так как карту мы загружаем только при наведении, то нам необходимо пользователю показать что карта здесь все-таки есть. Для этого я сделал скриншот того места на карте, которое затем загрузиться. А изображение было оптимизировано и затем я его положил в папку img.

Итак, вот стили для блока с картой:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* &#34;Блок-обертка&#34;, где мы задаем фоновое изображение скриншотом как на карте */
.ymap-container {
  position: relative;
  margin: 3em 0 2em 0;
  overflow: hidden;
  cursor: pointer;
  background: url('../img/yandex-before-load-marker.png') #ffffff no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 2em  0 rgba(0,0,0,.2);
}
 
/* Блок, в котором появится Яндекс.Карта */
#map-yandex {
  position: relative;
  z-index: 7;
  width: 100%;
  height: 20em;
  cursor: pointer;
  background-color: transparent;
}

Остались стили только для индикатора загрузки:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* Индикатор загрузки, который показывается до загрузки карты */
.loader {
  position: absolute;
  z-index: 15;
  top: -100%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #000000;
  transition: opacity .7s ease;
  opacity: 0;
  background-color: rgba(0,0,0,.55);
}
 
.loader:after,
.loader:before {
  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: '';
  animation: rotation 1s linear infinite;
  border: solid 8px #ffffff;
  border-left-color: transparent;
  border-radius: 50%;
}
 
@keyframes rotation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
 
@keyframes blink {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}

Здесь я выложил пример, где нет префиксов, чтобы код не был громоздким.

4 этап. Заставляем все вместе работать (JS)

Чтобы много не расписывать, опишу лишь процесс: когда пользователь наводит на карту, появляется индикатор загрузки (в это время загружается API Яндекса, а после сама карта), как только карта была загружена, то индикатор загрузки пропадает:

JAVASCRIPT КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
//Переменная для включения/отключения индикатора загрузки
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: [55.730138, 37.594238], // координаты центра на карте
    zoom: 7, // коэффициент приближения карты
    controls: ['zoomControl', 'fullscreenControl'] // выбираем только те функции, которые необходимы при использовании
  });
  var myPlacemarkTemp = new ymaps.Placemark([55.730138, 37.594238], {
      balloonContent: "Здесь может быть ваш адрес",
  }, {
      // Опции.
      // Необходимо указать данный тип макета.
      iconLayout: 'default#imageWithContent',
      // Своё изображение иконки метки.
      iconImageHref: 'img/map-marker.png',
      // Размеры метки.
      iconImageSize: [50, 50],
      // Смещение левого верхнего угла иконки относительно
      // её "ножки" (точки привязки).
      iconImageOffset: [-25, -50],
  });
  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();
 
});

Весь код я постарался подробно прокомментировать, чтобы все было понятно, но если остались вопросы, то вы можете задать их мне в комментариях.

Скачать готовый пример вы можете по ссылке ниже:

Скачать готовый пример

Вывод

Данный способ особенно хорошо, если применять его вместе с другими способами оптимизации: запускаем Youtube видео только по клику и запускаем GIF по клику. Тогда вы точно ощутите прирост в скорости загрузки.

Если у вас появились идеи и мысли на счет того, как можно оптимизировать данный способ — не стесняйтесь, пишите в комментариях! 🙂

Успехов!

С Уважением, Юрий Немец

Новые кейсы и статьи по digital маркетингу
63 комментария к записи
  • Влад

    Отличная статья! Оптимизация сайта как никогда важна сегодня и если есть возможность ускорить загрузку сайта за счет карт то конечно же надо это делать. На своем сайте делюсь секретами по оптимизации блога на wordpress.

     
  • Дмитрий Ковалевский

    Интересный вариант — при наведении. Спасибо) возьму на заметку. Но сам действую немного по другому, если интересно то так:

    1. Загрузка скрипта карты только после загрузки страницы: window.onload = function() { …}); 

    2. В этот момент прелоадер на месте карты.

    3. Когда api готово узнаю через ymaps.ready(function() { …}); И в этот момент скрываю прелоадер и открываю блок с картой.

    Конечно запросов на странице сразу немало, но визуально для пользователя все происходит плавно и карта готова сразу.

     
    • Юрий Немец

      Спасибо за способ, Дмитрий! Вы предложили также хороший рабочий вариант.

       
      • Сергей

        Подскажите, если у меня ссылка на карту такого вида https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=RClilQyY6r_y4lNbQuMn_TEDxcVV8_6U&amp;height=466&amp;lang=ru_RU&amp;sourceType=constructor&amp;scroll=true, куда ее вставлять?

         
        • Юрий Немец

          Добрый день, Сергей!

          Вам необходимо добавить данный URL в атрибут src тега script следующим образом:

          <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=RClilQyY6r_y4lNbQuMn_TEDxcVV8_6U&amp;height=466&amp;lang=ru_RU&amp;sourceType=constructor&amp;scroll=true"></script>

           

           
          • Сергей

            Дико извиняюсь, вот так?

              script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=RClilQyY6r_y4lNbQuMn_TEDxcVV8_6U&amp;height=466&amp;lang=ru_RU&amp;sourceType=constructor&amp;scroll=true';
              document.getElementsByTagName("head")[0].appendChild(script);
            }

             

             
      • Сергей

        Юра, удалите свойство "z-index: 15 "для  класса ".loader".  Оно лишнее.:)

         
  • Задрот

    Привет, я в js не силен, поэтому подскажи, в этом коде:

    
    // Функция загрузки 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);
    }

     

    Почему тут сначала идет проверка загружен ли скрипт, потом сразу вызывается функция колбек, в котором вызывается функция инициализации. И только в конце в действительности загружается скрипт с api? 

     

     
  • Дмитрий

    Посмотрите Ваш последний оптимизированный пример, если первый раз открыть страницу и навести курсор на карту, то после отработки индикатора загрузки появляется карта. Но если мы обновим эту же страницу в браузере и повторно наведем курсор на поле карты, то появившийся индикатор загрузки крутится бесконечно. Как подкорректировать код, чтобы индикатор исчезал при повторных перезагрузках страницы?

     
    • Юрий Немец

      Добрый день, Дмитрий!

      Напишите, пожалуйста, что у вас за браузер и какая версия, так как проверил в следующих браузерах и такой ошибки не обнаружил:

      1) Firefox 50.1.0 — корректно работает

      2) Google Chrome 55.0.2883.87 — корректно работает

      3) Opera 42.0.2393.137 — корректно работает

      4) Safari 5.1.4 — корректно работает

       
      • Сергей

        Добрый день, такая же проблема, как и у Дмитрия. При повторных перезагрузках страницы появившийся индикатор загрузки крутится бесконечно (но не всегда, и только в Firefox, в остальных браузерах все работает корректно, даже в IE11). Проверял на разных компьютерах, такой же результат. А так метод очень понравился .Спасибо.

         
      • Дмитрий

        Юрий спасибо за Ваш ответ, проблема в firefox 50.1.0, проверьте именно первый раз карта грузится корректно, но если на этой же странице не уходя с неё, сделать перезагрузку через "Обновить текущую страницу" и повторно навести курсор на поле с картой, то прелоадер уходит в бесконечность, причем если чуть изменить размер окна браузера (уменьшая его курсором например), то прелоадер сразу пропадает.

        На смартфоне в firefox 51.0b15 все ок.

         
      • Иван

        Также На Fire foxe подглючивает, прилоадер уходит в бесконечночть, если уменьшить размер окна то все ок, в других браузерах и на мобильных работает без проблем. Может все таки как то можно решить этот трабл?

         
      • Иван

        Появляется ошибка в консоле:

        Error: WebGL warning: <SetDimensions>: Failed to create WebGL context: failIfMajorPerformanceCaveat: Driver is not hardware-accelerated.

         
  • Дмитрий

    На данный момент ушел от этой проблемы путем удаления дива с прелоадером, соответственно сейчас не виден процесс загрузки карты визуально, но она хотя бы в итоге грузится через пару секунд.

     
    • Юрий Немец

      Дмитрий, добрый день! А понимает ли сейчас посетитель с медленным интернетом, что карта загружается, и это не просто изображение?

       
      • Дмитрий

        Трудно сказать, надеюсь что медленного интернета практически нет. Юрий Вы не могли бы подсказать вариант, чтобы изначально была ссылка например (посмотреть на карте) и по клику на ней уже открывался div соответственно с подгрузкой всех скриптов, т.е. вместо варианта наведения на карту сделать ссылку. Готов оплатить данную доработку, напишите на 20cent@mail.ru

         
  • Key-Bo

    а потом появился async

     
  • Андрей

    Увы, но ни один из примеров не будет работать на мобильных устройствах. Более правильно будет загружать либо при определении, что элемент попал в видимую часть экрана, либо просто при прокрутке.

     
    • Юрий Немец

      Андрей, событие hover срабатывает на мобильных устройствах при клике. Поэтому код работает. Но правильно вы написали, что загружать карту лучше при прокрутке.

       
  • Виктор

    Как сделать загрузку карт по клику? (как с оптимизацией ютуб)

     
    • Юрий Немец

      Добрый день, Виктор!

      Вам необходимо в скрипте в 90-й строке заменить строку:

      $('.ymap-container').mouseenter(function(){

      на:

      $('.ymap-container').click(function(){

       

       
      • Александр

        Подскажите а как на десктопах выводить карту при наведении, а на мобильных при клике

         
  • Дмитрий

    С карты Яндекса нельзя делать скриншоты, это нарушение пользовательского соглашения. Лучше используйте StaticApi для этого

     

    также в версии 2.1 нет параметра loadByRequire

     

    Метод ymaps.load не документирован и его лучше не использовать

     

    Закладываться на загрузку тайлов- плохая практика, она может никогда не наступить, поэтому в АПИ и нет соответствующего события и ваши пользователи часто получают вечный прелоадер. Рекомендую убрать это совсем

     
  • Антон

    Спасибо за пример!
    Подскажите а как поменять цвет метки?

     
    • Юрий Немец

      Антон, примеры разных меток можно посмотреть прямо в песочнице яндекса — здесь.

       
  • Константин

    Полезная статья, спасибо!

    Заинтересовал эффект анимации изображений при наведении курсора (небольшое вращение). Это фишка шаблона или какой-то сторонний плагин? 🙂

     
    • Юрий Немец

      Добрый день, Константин!

      Все намного проще: при наведении курсора на изображение применяется CSS свойство:

      transform: rotate(-45deg)

       

       
  • Влад

    Добрый день, возможно ли провернуть подобный трюк с картой из яндекс конструктора? 

     
    • Юрий Немец

      Добрый день, Влад!

      Можно, но нужно создавать JS скрипт через JS. Немного странно звучит, но так получится отложенная загрузка 🙂 . Также у конструктора есть возможность вставлять через iframe, поэтому точно можно сделать также.

       

       
  • АКВА ПРЕМИУМ

    Спасибо за статью, Юрий. Не могли бы вы помочь с реализацией данного примера на моем сайте на платной основе?)

     
    • Юрий Немец

      Добрый день!

      К сожалению, с этим помочь не могу.

       
  • Сергей

    Наконец-то сложилось. Всю голову сломал — как ускорить загрузку карты.

    Благодарю. 

     
  • Сергей

    Добрый день!

    Что сделать, у меня затемняется вся страница при загрузке и выглядит не очень(

     
    • Юрий Немец

      Сергей, значит у вас не задан родительский элемент для блока с затемнением. Очень внимательно просмотрите весь HTML, все ли также, как это в примере, который в статье.

      Затем CSS скопируйте как в примере в статье.

      И потом JS. Обязательно проверьте на ошибки в консоли.

       
  • Камила

    Здравствуйте!
    Не подскажете, как можно реализовать данный код на странице с несколькими картами? На одной карте все работает прекрасно, а к остальным трем не получается подключить. Плохо знаю JS, не получается правильно модифицировать код.

     
    • Юрий Немец

      Камила, можно сделать с любым количеством карт. Лучше всего в цикле (информация про циклы JS) их обойти, чтобы не копировать данный код для каждой карты отдельно. Но здесь есть момент с программированием.

       
  • Александр

    Всем привет! Сайт просто огонь! Вся информация как на подбор — полезна!

    У меня есть маленький вопросик, если можно — мне нужно на одностраничник как раз так же карту разместить, что бы без напряга для клиентов подгружалась, только карта с конструктора Яндекс, где я разметил сектора и информацию разместил по ним.

    Вот пример:

    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A5f63edd1ab94181ee1bba8159eccebbd80c9afde1d3142141b5306536ce22a62&amp;width=100%25&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script&gt;

    Как мне её спрятать, до наведения?

    И спасибо за вам за такой качественный контент!

     
    • Юрий Немец

      Здравствуйте, Александр!

      С помощью вставки карты сгенерированной с помощью конструктора карт Яндекса нельзя сделать загрузку при наведении. Потому что у вас уже скрипт выполняется асинхронно и даже если спрятать блок с картой, то на самом деле карта все равно загрузится, а при наведении вы лишь покажете ее.

      Так как карта загружается асинхронно, то она не замедляет загрузку сайта, поэтому можете оставить данный вариант, как у вас был.

       
  • Алексей

    У меня почему-то в Firefox работает, а в chrome и yandex browser не работает в сети, хотя локально через эти браузеры запускается

     
    • Юрий Немец

      Алексей, есть ли ошибки в консоли? Проверяли ли в режиме инкогнито в браузерах, в которых не работает?

       
  • Иван

    Не подскажете как на joomle, js прописать? Все работает, кроме индикатора загрузки, что то в скрипте не работает, классы не меняются.

     
    • Иван

      Тупанул

      jQuery(document).ready(function($) {
      ...
      });

      и все работает

       
  • Евгений

    Огромное спасибо, еще не тестировал в PageSpeed Insights, но на сайте подгрузка вроде работает))

     
    • Евгений

      К сожалению не исчезли скриптыsmiley Что то типо того показывает

      /2.1.72/combine.js?callback_prefix=…(api-maps.yandex.ru)

       
      • Юрий Немец

        Евгений, а можете полную ошибку описать, которая у вас возникает?

         
  • Захар

    Добрый день, на страницу вордпресс вставить такую карту не получится? Вроде всё прошерстил — не загружается при наведении. Вообще карты нет, только стили. Скрин виден и все.

     
    • Юрий Немец

      Захар, этот скрипт можно вставить на любой CMS, вам нужно понимать только логику, как это работает.

      Делайте по порядку: сначала стили. Нужно, чтобы WordPress стили темы не перебивали стили, которые относятся к карте.

      Похоже, что у вас JS не работает. Есть ли в консоли ошибки?

       
  • Вадим

    Добрый день, подскажите пожалуйста как изменить устанавливаемый на карту флажок (тип, цвет, добавить текст), добавить дополнительный флажок и проложить маршрут между ними?

     
    • Юрий Немец

      Вадим, вы можете изменять цвета (пример здесь), вставлять свои изображения (смотрите пример здесь). Про дополнительный флажок отвечал в комментариях ниже, либо можете увидеть в примерах в песочнице Яндекса.

       
      • Олег

        Добрый день уже два часа мучаю ваш код , добавил в него вывод нескольких маркетов с разными описаниями, с помощью параметра
        properties: {
        iconContent: ‘S’,
        hintContent: ‘Salon 22’,
        clusterCaption: ‘Salon 22’,
        balloonContentBody: ‘Salon 22, дата: 29.03.2019Екатеринбург, Куйбышева 21’
        }
        вывод описания маркера при клике
        а вот заменить маркет по умолчанию своей картинкой не получается. переходил по указанному адресу, пытался его понять работу и скрестить с вашим кодом, не судьба наверное

         
        • Юрий Немец

          Так как было много вопросов по тому, как вставить свое изображения — я обновил код. Примеры сейчас также с маркером в виде изображения. Обратите внимание в статье на JS код с 15-й по 28-ю строку.

           
  • Alex

    Не работает на мобильных устройствах.

    Пробовал добавлять разные события, но ничего не происходит.

    $('.ymap-container').on('click mouseenter touchstart tap',function(){ ...

     

     
    • Юрий Немец

      На мобильных устройствах специально дописывать ничего не нужно, чтобы срабатывало, оно и так работает по клику, потому что hover так работает. Но Это не очень удобно для мобильных устройств. Не каждый человек догадается кликнуть.

      Там я бы предложил сделать такое решение: при определенном проценте просмотра страницы автоматически подгружать карту.

       
  • Эмиль

    Здравствуйте, благодарю за метод. 

    Всё работает, но почему-то иногда просто висит кружок типа загружаюсь и всё, пока не обновишь так и висит. 

    Подключено так :

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script&gt;
        <script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script&gt;
        <script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script&gt;
        <script async src="js/wow.min.js"></script>
        <script async src="js/script.js"></script>
        <script async src="js/maps.js"></script>

     
  • Сергей

    Спасибо за статью. И еще пожелание: лучше уберите эффект периодического уменьшения и увеличения кода . А то только начинаешь изучать код, а он пропал и начинает медленно появляться — раздражает.

     
    • Юрий Немец

      Сергей, сейчас все отлично. Спасибо, что написали об этом.

       
  • Николай

    Подскажите, пожалуйста, как поставить несколько меток в таком способе?  несколько координат выделить на карте, спасибо

     
    • Юрий Немец

      Николай, обратите внимание на 15-ю строку, где задаются параметры метки на карте.

      Затем с помощью функции geoObjects.add этот же флажок добавляется на карту в 21-й строке.

      Если совсем просто хотите: нужно создать еще одну такую переменную, но с другим именем и добавить ее на карту точно такой же функцией.

       
      • Николай

        да, получилось!  спасибо больше, Юрий!

         

        а подскажите еще, пожалуйста, можно ли на эти метки свой текст вставлять? грубо говоря адрес по клику на них, что бы высвечивался? и как это сделать, заранее спасибо

         
        • Юрий Немец

          Николай, я обновил пример. Сейчас в Javascript добавился следующий код:

          // Описываем данные геообъекта.
          properties: {
             balloonContent: "Здесь может быть ваш адрес"
          }

          Обязательно посмотрите, как это расположено в общем JS коде в статье. Там необходимо поставить запятую (смотрите 19-ю строку), иначе будет ошибка.

           
          • Николай

            Все круто, спасибо большое!  Очень помогли!

             

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *