Как добавить карту на сайт: Яндекс, Google и 2ГИС + lazy-load и ускорение

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

Ниже разберем, как вставить карту на сайт через Яндекс, Google и 2ГИС, а затем расскажем, как  ускорить ее загрузку, чтобы не проседали метрики.

Как вставить Яндекс карту на сайт: iframe и Конструктор

Первый вариант: встроить Карту с уже существующей меткой

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

Пошагово:

1. Найдите нужный адрес.

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

3. Выберите виджет с картой и скопируйте код для вставки. Можете сначала включить предпросмотр, чтобы увидеть, как она будет выглядеть.

Второй вариант: создать свою метку

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

Создание карты пошагово:

1. Найдите адрес, выберите цвет и вид маркера.

2. Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.

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

4. Сохраните карту. В следующем окне выберите ее вид: интерактивная или статическая.

   1. Интерактивная полезнее: карту можно двигать и масштабировать. Для сайта чаще выбирают ее.

   2. Статическая выглядит как картинка. Подойдет, если интерактивность не нужна и важна скорость.

5. Задайте размер карты: можно ввести пиксели в окошке размера или растянуть карту вручную.

6. Если выбрать Растянуть по ширине, у карты появится параметр width=100%, и при вставке на сайт она займет всю ширину блока.

7. Скопируйте код для вставки на сайт: можно выбрать JavaScript или iframe.

   1. Iframe проще и быстрее вставляется, но возможностей настройки меньше.

   2. Если нужна своя логика: поиск, маршруты, управление слоями, подключайте JavaScript API v3 и работайте через код. Документация Конструктора. Быстрый старт по JS API: инструкция по подключению v3. Ключ выдается в Кабинете разработчика для пакета JavaScript API и HTTP Геокодер.

8. Если вам нужно поменять язык топонимов, измените параметр lang в коде. Пример: ru_RU, uk_UA, tr_TR.

9. Вставьте код карты на страницу через редактор сайта или HTML-блок в CMS.

Интересное для работы с Яндексом:
Как попасть в колдунщики

FAQ по Яндекс.Картам

Можно ли вставить Яндекс карту на сайт без API-ключа?
Да. Если вы берете код из Яндекс.Карт или Конструктора карт, карта вставляется без ключа. API-ключ нужен, когда вы подключаете JavaScript API и управляете картой через код.

Что выбрать: iframe или скрипт из Конструктора?
Iframe проще и легче поддерживать. У скрипта из Конструктора больше интерактива и настроек, но он добавляет нагрузку на страницу.

Как поменять язык подписи и названий?
В коде Конструктора измените параметр lang. Для JavaScript API v3 язык задается в URL подключения API.

Как вставить Google карту на сайт: embed iframe и Maps Embed API

Первый вариант: вставить карту из Google Maps с существующей меткой

Откройте Google Maps, найдите компанию и скопируйте код для вставки. Карта будет выглядеть так:

1. Найдите компанию на картах и нажмите Поделиться.

2. Откройте Встраивание карт и выберите размер из предложенных или задайте свой.

3. Скопируйте HTML-код и вставьте его в код страницы там, где вы хотите разместить карту.

Если вы используете не только iframe, но и API Google Maps Platform (поиск мест, маршруты, геокодинг), учитывайте изменения тарифов с марта 2025: вместо фиксированного кредита появились бесплатные месячные лимиты по каждому SKU, а продукты распределили по категориям Essentials, Pro и Enterprise.

Вставка через меню Поделиться → Встраивание карт обычно работает без API-ключа. Но если вы используете Maps Embed API по документации Google, ключ обязателен. При этом сам Maps Embed API заявлен как бесплатный без лимитов, но подключается через Google Cloud, а ключ лучше ограничивать по домену.

Второй вариант: создать свою метку в Google Maps

Создайте метку в Google Картах. Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.

Пошаговое создание метки на Google картах:

1. Введите адрес или название компании.

2. Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.

3. Откройте меню с тремя точками и выберите Добавить на сайт.

4. Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.

Важная ремарка относительно встраивания Google карт в 2026 году – для России они не актуальны. И тут даже не идет речь о том, что мало у кого получается обновить данные компании. Банально отсутствуют новые дороги, здания, станции метро, жд и авто остановки и т.д.

Поэтому особого смысла встраивать карты от Google на свои сайты просто нет. Это подходит проектам под заграничное продвижение, но в России точно стоит искать альтернативы. И если у вас на сайте где-то встроена Google карта, лучше ее заменить на аналог Яндекса или 2ГИС.

Дмитрий Борисов, специалист по цифровому продвижению в PromoPult

FAQ по Google Maps

Нужен ли API-ключ, чтобы вставить Google карту на сайт?
Если вы копируете iframe из интерфейса Google Maps, ключ чаще всего не нужен. Если вы используете Maps Embed API и другие API Google Maps Platform, ключ обязателен, а проект подключается в Google Cloud.

Почему Google карта может грузиться медленно?
Iframe и скрипты карт тянут тяжелые ресурсы и могут ухудшить LCP и INP. Решение может быть отложенная загрузка и загрузка карты по клику, наведению или доскроллу.

Что выбрать для России: Google или альтернативы?
Для локального продвижения в России будет удобнее Яндекс и 2ГИС из-за актуальности справочников. Но для международных проектов Google Maps остается рабочим вариантом.

Как вставить карту 2ГИС на сайт: MapGL и Конструктор

Встроить карту 2ГИС через MapGL JS API

Для интерактивной карты 2ГИС на сайте чаще используют MapGL JS API. Вам нужен ключ доступа, который выдается в Platform Manager.

Пошагово:

1. Зайдите в Platform Manager и создайте demo key или подключите подписку.

2. Подключите библиотеку MapGL и инициализируйте карту. Быстрый старт описан здесь.

3. Добавьте маркер по координатам или адресу. Если нужно, подключите поиск и маршруты отдельными модулями.

Пример подключения:

<div id="dgis_map" style="width: 100%; height: 400px"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
  const map = new mapgl.Map('dgis_map', {
    key: 'YOUR_2GIS_KEY',
    center: [37.6176, 55.7558],
    zoom: 13
  });
  new mapgl.Marker(map, { coordinates: [37.6176, 55.7558] });
</script>

1. Введите адрес и найдите нужное здание.

2. Настройте цвет метки, введите название.

3. Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.

4. С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.

5. Выберите нужный размер карты.

6. Скопируйте код для вставки на сайт или в мобильное приложение.

FAQ по 2ГИС

Можно ли вставить карту 2ГИС бесплатно?
Конструктор карт 2ГИС позволяет собрать карту и взять код вставки без сложной настройки. Для MapGL JS API нужен ключ, а условия зависят от тарифа и типа проекта.

Что выбрать: Конструктор 2ГИС или MapGL?
Конструктор подходит, когда нужна карта с меткой и минимум настроек. MapGL выбирают, когда нужна полноценная интерактивность и управление картой через код.

Почему карта 2ГИС не помещается в блок?
Проверьте, что у контейнера задана высота. Для адаптива чаще используют width=100% и фиксированную высоту или aspect-ratio.

Что выбрать для сайта: Яндекс.Карты, Google Maps или 2ГИС

Выбор карты для сайта зависит от географии аудитории, актуальности справочника, требований к интерактивности и скорости. Если вам нужна просто метка с адресом, чаще всего хватает встраивания через iframe или конструктор. Если нужна своя логика, маршруты и интеграции, без API не обойтись.

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

FAQ: выбор карты для сайта

Можно ли поставить на сайт сразу две карты: Яндекс и 2ГИС?
Можно, но это почти всегда тяжелее по скорости. Лучше оставить один сервис, а второй вынести в ссылку или загружать по клику.

Что выбрать для простого сайта-визитки?
Iframe или код из конструктора. Это самый быстрый и надежный способ вставить карту на сайт.

Когда нужен API вместо iframe?
Если вы хотите управлять картой через код: динамически менять метки, строить маршруты, фильтровать объекты, подключать поиск по карте.

Отложенная загрузка карты на сайте: lazy-load для Core Web Vitals

Карты громоздкие, они влияют на загрузку сайта и могут тормозить отображение страницы. 

Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость и подсказывает, что мешает Core Web Vitals. Учтите, что тяжелые скрипты на странице часто бьют не только по скорости, но и по отзывчивости.

Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.

Загрузка карты по доскроллу до нее

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

Самый простой вариант для iframe — добавить нативную отложенную загрузку. Она поддерживается в большинстве современных браузеров:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m14..."
  width="600"
  height="450"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allowfullscreen></iframe>

Если нужна более жесткая экономия ресурсов, уберите src и подставляйте его только когда карта реально нужна. Этот способ удобен, когда на странице несколько карт.

<iframe
  class="js-lazy-map"
  data-src="https://www.google.com/maps/embed?pb=!1m14..."
  width="600"
  height="450"
  style="border:0;"
  loading="lazy"
  allowfullscreen></iframe>

<script>
  (function () {
    const frames = document.querySelectorAll('iframe.js-lazy-map[data-src]');
    if (!('IntersectionObserver' in window)) {
      frames.forEach((f) => f.setAttribute('src', f.getAttribute('data-src')));
      return;
    }
    const io = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        const f = entry.target;
        f.setAttribute('src', f.getAttribute('data-src'));
        f.removeAttribute('data-src');
        observer.unobserve(f);
      });
    }, { rootMargin: '200px 0px' });
    frames.forEach((f) => io.observe(f));
  })();
</script>

Загрузка карты после наведения курсора

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

При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:

<script type="text/javascript" charset="utf-8" async="" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>

На сайте нужно написать контейнер для блока с картой:

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy" async="" data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>
</div>

Также нужны стили для статичной картинки, подойдет скриншот.

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/uploads/common/ymap0.png);
        background-position: center center;
    }
</style>

Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//запуск один раз, и удаление наблюдателя сразу
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data-src');
            console.log('YMAP LOADED');
        }
    }
</script>

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

FAQ по lazy-load карты и Core Web Vitals

Достаточно ли атрибута loading="lazy" для карты?
Часто да, если карта ниже первого экрана. Если карта выше фолда или на странице несколько тяжелых блоков, лучше дополнительно откладывать подстановку src до момента, когда пользователь доскроллит до карты или кликнет по ней.

Как сделать отложенную загрузку, если на странице 2–5 карт?
Дайте всем iframe общий класс и храните URL в data-src, как в примере с IntersectionObserver. Так не нужно писать отдельный JS для каждой карты.

Какие метрики чаще всего страдают из-за карт?
LCP, если карта загружается в верхней части страницы, и INP, если скрипты блокируют главный поток. Отложенная загрузка и загрузка по взаимодействию обычно снимают проблему.

Проверить весь сайт на ошибки поможет сервис Анализ сайта: у него есть 70 тестов для анализа ваших и конкурентных проектов. Можно проверить не только главную, но и внутренние страницы. Оценит оптимизацию контента, ссылочную массу, технические параметры и другое. 

Как настроить отображение карты на сайте

Когда мы добавляем карту на сайт, она автоматически размещается в левом верхнем углу в заданном размере, который мы настроили в конструкторе.

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

Как растянуть карту на всю ширину экрана

Существует несколько способов, чтобы карта занимала всю ширину экрана:

1. Указать в коде вместо фиксированной ширины значение 100%.
   

2. Удалить значение ширины вовсе, что также приведет к тому, что карта растянется на всю ширину.

3. Поместить скрипт карты в div-блок, удалить значения ширины и высоты в самом коде карты и задать необходимые параметры для родительского блока с помощью CSS. К примеру:
   

#map_container {
width:100vw;
height:700px;
}

Единицы измерения vw для ширины и vh для высоты равны процентам и рассчитываются относительно размера окна браузера. Поэтому для корректной работы лучше указать именно их.

Кроме ширины, можно изменить и высоту карты, следуя тем же шагам.

Как разместить карту по центру экрана

Чтобы карта была по центру экрана, достаточно поместить её в div-блок и в CSS задать этому блоку параметр margin: 0 auto. Карта идеально отцентрируется.

Это касается и любого другого расположения карты. Достаточно поместить её в div-блок и позиционировать этот блок, применяя нужные стили.

FAQ по отображению карты на сайте

Почему карта не видна после вставки кода?
У контейнера может быть высота 0. Задайте высоту в CSS, иначе карта не сможет отрисоваться.

Как сделать карту адаптивной по ширине?
Используйте width=100% и задавайте высоту через CSS. Если карта внутри iframe, лучше добавить обертку и управлять размерами обертки.

Можно ли уменьшить нагрузку, если карта нужна не всем?
Да. Покажите статичную картинку-превью и загружайте интерактивную карту по клику. Это ускоряет первый экран и снижает нагрузку на INP.

Расскажите в комментариях, как вы добавили карту на сайт и какие способы ускорения сработали у вас.