Категории

• Все категории
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• Windows
• Безопасность
• железо
• Сети LAN
• Создание сайтов

Как сделать свою интерактивную карту с метками (API Яндекса)

02.10.2025 14:36 | коды из категории: Создание сайтов

Как подключить свою карту на сайт: пошаговая инструкция

Чтобы не гуглить каждый раз при создании своей интерактивной карты — эта статья для вас. Ниже — простой, рабочий способ вставить карту с несколькими метками на любой сайт. Только HTML и JavaScript. Никаких фреймворков, никакой магии.

1. Создайте контейнер для карты

Сначала добавьте на страницу блок, в котором будет отображаться карта. Главное — задать ему высоту и ширину:

<div id="map-yandex" style="width: 100%; height: 500px;"></div>

💡 Без height карта не покажется — API Яндекса требует явного размера контейнера.

2. Подключите API и добавьте метки

Теперь вставьте этот скрипт прямо перед закрывающим (или внизу статьи, если ваш блог позволяет):

<!-- Контейнер карты -->
<div class="ymap-container">
  <div id="map-yandex" style="width: 100%; height: 400px;"></div>
  <div class="loader"></div>
</div>

<script>
// Флаг, чтобы загрузить карту только один раз
let mapLoaded = false;

// Инициализация карты и метки
function initMap() {
  // Создаём карту с центром и зумом
  const map = new ymaps.Map("map-yandex", {
    center: [55.73, 37.59],
    zoom: 10,
    controls: ['zoomControl', 'fullscreenControl']
  });

  // Опции для кастомной иконки метки
  const markerOptions = {
    iconLayout: 'default#imageWithContent',
    iconImageHref: '/map/img/marker.svg', // путь к SVG-иконке
    iconImageSize: [50, 50],
    iconImageOffset: [-25, -50]
  };

  // Одна метка с балуном (всплывающим окном)
  const placemark = new ymaps.Placemark(
    [55.73, 37.59], // координаты
    {
      balloonContent: 'Пример адреса<br><a href="#" style="color:blue">Подробнее на Яндекс.Картах</a>'
    },
    markerOptions
  );

  // Добавляем метку на карту
  map.geoObjects.add(placemark);

  // Скрываем спиннер после полной загрузки тайлов
  waitForTilesLoad(map.layers.get(0).get(0)).then(() => {
    document.querySelector('.loader').classList.remove('is-active');
  });
}

// Вспомогательная функция: ждём загрузки всех тайлов карты
function waitForTilesLoad(layer) {
  return new ymaps.vow.Promise((resolve) => {
    const tc = getTileContainer(layer);
    if (!tc) return resolve();

    const allReady = tc.tiles.all((tile) => tile.isReady());
    if (allReady) {
      resolve();
    } else {
      tc.events.once('ready', resolve);
    }
  });
}

// Находим контейнер с тайлами (внутренняя реализация API)
function getTileContainer(layer) {
  for (const key in layer) {
    if (
      layer[key] instanceof ymaps.layer.tileContainer.CanvasContainer ||
      layer[key] instanceof ymaps.layer.tileContainer.DomContainer
    ) {
      return layer[key];
    }
  }
  return null;
}

// Загрузка скрипта API Яндекс.Карт
function loadYmapsScript(callback) {
  const script = document.createElement('script');
  script.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
  script.onload = callback;
  document.head.appendChild(script);
}

// Инициализация карты при первом наведении на контейнер
document.querySelector('.ymap-container').addEventListener('mouseenter', () => {
  if (!mapLoaded) {
    mapLoaded = true;
    document.querySelector('.loader').classList.add('is-active');
    loadYmapsScript(() => ymaps.load(initMap));
  }
});
</script>

3. Не забудьте про иконку метки

Если вы хотите использовать свою иконку (например, /map/img/marker.svg), убедитесь, что файл существует по этому пути. Если нет — либо загрузите его, либо временно удалите строки:

iconImageHref: '/map/img/marker.svg',
iconImageSize: [50, 50],
iconImageOffset: [-25, -50]

Тогда будут использоваться стандартные метки Яндекса.

Готово!

Теперь у вас на сайте работает живая карта с вашими адресами. И в следующий раз — просто скопируете этот код и не будете снова искать в Google 😌

P.S. Код работает без jQuery, без CSS-фреймворков и даже без отдельных JS-файлов. Просто вставил — и заработало.

← Назад к списку

---