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

Яндекс Карта на странице контактов — не просто красивый элемент, а практический инструмент: пользователь сразу видит как добраться, может построить маршрут и не уходит в отдельное приложение. В статье разберём все способы добавить Яндекс Карту на сайт: самый простой через iframe за 5 минут, вариант для WordPress и Joomla, а для разработчиков — подключение через JavaScript API. Каждый способ — с пошаговой инструкцией и готовым кодом.

Зачем добавлять Яндекс Карту на сайт

Преимущества перед Google Maps для российских сайтов

Яндекс Карты — очевидный выбор для российских сайтов по нескольким причинам.

• Во-первых, у Яндекса значительно лучше покрытие и актуальность данных для России: более подробные схемы зданий, актуальные данные об организациях через Яндекс Бизнес, пробки в реальном времени.
• Во-вторых, большинство российских пользователей привыкли к интерфейсу Яндекс Карт — им не нужно разбираться в незнакомом сервисе.

С 2022 года Google Maps значительно ухудшил покрытие России: часть данных устарела, многие организации не обновляются. Для российского бизнеса Яндекс Карты сейчас предпочтительнее и по актуальности данных, и по удобству для конечного пользователя.

Что можно реализовать: метка, маршрут, несколько точек

В зависимости от выбранного способа вставки, карта на сайте может:

• Показывать одну метку с адресом организации — самый распространённый сценарий для страницы контактов
• Отображать маршрут до офиса — схема проезда из центра города или от ключевых ориентиров
• Показывать несколько меток — несколько офисов или точек выдачи
• Быть полностью интерактивной — пользователь может строить маршруты, кликать на метки, получать информацию об объектах
• Иметь кастомный дизайн — цвета, стили, собственные иконки меток через API

Для большинства сайтов (лендинги, корпоративные сайты, интернет-магазины) достаточно iframe с меткой. API нужен только если карта — ключевой функциональный элемент:

• поиск ближайшего магазина,
• отслеживание заказа,
• карта объектов недвижимости.

Бесплатно или платно: условия использования

Яндекс Карты для сайта в базовом варианте бесплатны:

• Вставка через iframe — полностью бесплатна без ограничений на количество просмотров
• JavaScript API (Maps JS API 3.x) — бесплатен при нагрузке до 1000 запросов в сутки. При превышении нужно оплачивать через Яндекс Cloud
• HTTP Геокодер — для определения координат по адресу, тарифицируется отдельно

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

Вставить через iframe (самый простой)

Iframe — это встроенный фрейм, который загружает карту прямо с серверов Яндекса. Не нужен программист, не нужен API-ключ. Подходит для 90% сайтов.

Как создать карту в конструкторе Яндекса

Конструктор карт Яндекса находится по адресу yandex.ru/map-constructor. Это визуальный редактор, где можно создать карту с метками, маршрутами и подписями, а затем получить готовый HTML-код для вставки.

1. Перейдите на yandex.ru/map-constructor и войдите в аккаунт Яндекса
2. Нажмите «Создать карту»
3. В поисковой строке найдите нужный адрес — карта автоматически сфокусируется на нём
4. Нажмите «Добавить метку» и кликните на нужную точку на карте
5. Укажите название и описание метки (например: «Офис компании», адрес, телефон)
6. При необходимости добавьте маршрут: «Добавить маршрут» → укажите начальную и конечную точки
7. Настройте масштаб и центрирование карты так, как она должна выглядеть на сайте
8. Нажмите «Сохранить и продолжить»

Получить код iframe для вставки

После сохранения карты в конструкторе:

9. Нажмите «Получить код карты»
10. Выберите размер: стандартный (560×400 пикселей) или укажите собственный
11. Выберите вкладку «iframe»
12. Скопируйте готовый код — он выглядит примерно так:

<iframe src="https://api-maps.yandex.ru/frame/v1/-/XXXX" width="560" height="400" frameborder="0"></iframe>

Второй способ — получить iframe прямо из Яндекс Карт без конструктора:

• Откройте maps.yandex.ru и найдите нужный адрес или организацию
• Нажмите кнопку «Поделиться» (иконка в правом верхнем углу)
• Перейдите на вкладку «Код для сайта»
• Скопируйте iframe-код

Вставить iframe в HTML-страницу

Откройте HTML-файл страницы в редакторе и вставьте скопированный код в нужное место — обычно это раздел контактов. Пример:

<div class="map-container">
<iframe src="https://api-maps.yandex.ru/frame/v1/-/XXXX" width="100%" height="450" frameborder="0" allowfullscreen="true"></iframe> </div>

Обратите внимание: рекомендуется ставить width=»100%» вместо фиксированных пикселей — тогда карта будет адаптивной и корректно отображаться на мобильных устройствах.

Настройка размера, масштаба и внешнего вида

Параметры которые можно менять прямо в коде iframe:

Для адаптивной карты, которая хорошо выглядит на мобильных, оберните iframe в контейнер с относительным позиционированием:

<style>
.map-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="map-wrapper">
<iframe src="https://api-maps.yandex.ru/frame/v1/-/XXXX" frameborder="0"></iframe>
</div>

Добавить карту на WordPress

Через плагин: обзор актуальных вариантов

Для WordPress существует несколько плагинов для вставки Яндекс Карт. На начало 2026 года рабочие варианты:

Важная оговорка: плагины для Яндекс Карт обновляются реже, чем для Google Maps. Перед установкой проверьте дату последнего обновления и совместимость с вашей версией WordPress. Нередко самый надёжный вариант — вставить iframe вручную без плагина.

Через iframe без плагина — надёжный способ

Это самый стабильный вариант для WordPress — не зависит от сторонних плагинов и обновлений:

• Откройте нужную страницу в редакторе WordPress
• В редакторе Gutenberg нажмите «+» → найдите блок «Пользовательский HTML» (или «Custom HTML»)
• Вставьте iframe-код карты в этот блок
• Нажмите «Предпросмотр» — карта должна отобразиться
• Сохраните страницу

В классическом редакторе TinyMCE: переключитесь в режим «Текст» (не «Визуальный») → вставьте iframe-код в нужное место → сохраните.

Через шорткод в редакторе Gutenberg

Если используете плагин с поддержкой шорткодов, карта вставляется через блок «Шорткод»:

• Установите и активируйте плагин (например, WP Yandex Maps)
• В настройках плагина создайте карту: укажите адрес, добавьте метку
• Скопируйте шорткод карты — например, [yandex_map id=»1″]
• В редакторе Gutenberg добавьте блок «Шорткод» и вставьте его

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

Добавить карту на Joomla

Встроенный HTML-модуль

В Joomla самый простой способ — модуль «Пользовательский HTML» (Custom HTML):

• Войдите в панель администратора Joomla
• Перейдите в «Расширения» → «Модули» → «Создать»
• Выберите тип «Пользовательский HTML»
• В редакторе переключитесь в режим HTML (кнопка «Источник» или «HTML»)
• Вставьте iframe-код карты
• Назначьте модуль нужной позиции (например, в нижний колонтитул или сайдбар контактной страницы)
• Укажите на каких страницах отображать: «Только на выбранных страницах» → выберите страницу контактов
• Сохраните и опубликуйте

Важно: в редакторе Joomla по умолчанию может быть включена фильтрация HTML, которая удаляет iframe. Если карта не отображается, перейдите в «Система» → «Общие настройки» → «Фильтрация текста» → для вашей группы пользователей (Administrator, Super Users) убедитесь, что iframe не блокируется.

Через расширение для Joomla

Если нужна более гибкая интеграция, можно использовать расширения из Joomla Extensions Directory (extensions.joomla.org). Поищите «Yandex Maps» в каталоге — доступны как бесплатные, так и коммерческие модули. При выборе обращайте внимание на совместимость с вашей версией Joomla (3.x, 4.x или 5.x) и дату последнего обновления.

Для большинства задач модуль «Пользовательский HTML» с iframe полностью достаточен и не требует установки дополнительных расширений.

Яндекс Карты через JavaScript API

Что такое Maps API и когда он нужен

JavaScript API Яндекс Карт — это библиотека, которая позволяет программно управлять картой: добавлять и удалять метки динамически, строить маршруты по клику, кластеризовать большое количество точек, кастомизировать внешний вид.

API нужен когда:

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

Для простой страницы контактов с одной меткой API избыточен — достаточно iframe.

Получить API-ключ

Для работы с JavaScript API нужен ключ:

• Перейдите на developer.tech.yandex.ru
• Войдите в аккаунт Яндекса или зарегистрируйтесь
• Нажмите «Подключить API» → выберите «JavaScript API и HTTP Геокодер»
• Укажите название проекта и домен сайта (важно: API будет работать только с указанного домена)
• Скопируйте полученный API-ключ

Бесплатный лимит: до 1000 запросов в сутки. Для большинства сайтов этого достаточно с большим запасом.

Минимальный пример: карта с меткой на JavaScript

Вот минимальный рабочий пример карты с одной меткой. Замените YOUR_API_KEY на ваш ключ, а координаты — на координаты вашего адреса (их можно найти в Яндекс Картах: правая кнопка на точке → «Что здесь»):

<!DOCTYPE html>
<html>
<head>
<script src="https://api-maps.yandex.ru/v3/?apikey=YOUR_API_KEY&lang=ru_RU"></script>
</head>
<body>
<div id="map" style="width:100%; height:450px;"></div>
<script> ymaps3.ready.then(() => {const { YMap, YMapDefaultSchemeLayer, YMapMarker } = ymaps3; const map = new YMap(document.getElementById("map"), {location: { center: [37.617698, 55.755864], zoom: 15 }}); map.addChild(new YMapDefaultSchemeLayer()); const marker = new YMapMarker({ coordinates: [37.617698, 55.755864] }); map.addChild(marker);});
</script>
</body>
</html>

Координаты в формате [долгота, широта] — обратите внимание на порядок: сначала долгота, потом широта. Это отличается от привычного формата GPS.

Интерактивная карта: кластеризация, маршруты, балуны

Более продвинутые возможности API:

• Кластеризация — когда на карте много меток, они автоматически объединяются в кластеры при уменьшении масштаба. Реализуется через YMapClusterer
• Балуны (popups) — всплывающие окна при клике на метку с адресом, телефоном, фото. Реализуются через YMapPopup
• Маршруты — прокладка пути между двумя точками через YMapRoute
• Геокодинг — определение координат по строке адреса через HTTP Геокодер (отдельный API)

Документация актуальной версии API (v3) находится на yandex.ru/dev/jsapi30. Обратите внимание: значительная часть статей в интернете описывает старый API v2.1, который продолжает работать, но официально устарел. Для новых проектов используйте v3.

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

Поставить метку на нужный адрес через конструктор

Самый быстрый способ поставить метку — через конструктор карт:

• Откройте yandex.ru/map-constructor
• В поиске введите точный адрес (улица, дом, город)
• Нажмите «Добавить метку» на панели инструментов
• Кликните на нужную точку на карте — появится метка
• В открывшейся форме введите название («Наш офис»), описание и при желании загрузите фото
• Сохраните и получите код для вставки

Если точный адрес сложно найти на карте — можно задать координаты вручную. Координаты адреса найдите так: откройте maps.yandex.ru → найдите нужное место → правая кнопка мыши → «Что здесь» → скопируйте координаты.

Добавить несколько меток

В конструкторе карт можно добавить неограниченное количество меток:

• Создайте карту в конструкторе
• Последовательно добавляйте метки кнопкой «Добавить метку»
• Для каждой метки укажите название и описание
• При необходимости задайте разные цвета меток для различных типов объектов
• Сохраните и получите единый iframe-код для всех меток

Если меток очень много (десятки и сотни) — конструктор не подходит. В этом случае нужен JavaScript API с кластеризацией.

Показать маршрут до офиса

Схема проезда — популярный элемент страницы контактов. Через конструктор:

• В конструкторе карт нажмите «Добавить маршрут»
• Укажите начальную точку (например, «Центр города» или ближайшая станция метро)
• Укажите конечную точку — адрес вашего офиса
• Выберите тип маршрута: на автомобиле, пешком или на общественном транспорте
• Сохраните и получите код

Альтернативный способ — прямо в Яндекс Картах: откройте maps.yandex.ru → постройте нужный маршрут → «Поделиться» → «Код для сайта». Код будет содержать готовый iframe с маршрутом.

Добавить организацию в Яндекс Карты

Отличие: добавить карту НА сайт vs добавить сайт В карты

Это две принципиально разные задачи, которые часто путают:

Большинство этой статьи посвящено первой задаче. Вторая — регистрация организации — делается отдельно и нужна чтобы ваш бизнес находили через поиск Яндекс Карт.

Как зарегистрировать организацию в Яндекс Бизнесе

Яндекс Бизнес — это платформа для управления присутствием компании в экосистеме Яндекса: на Картах, в поиске, в Справочнике.

• Перейдите на business.yandex.ru
• Войдите в аккаунт Яндекса
• Нажмите «Добавить организацию»
• Введите название компании, адрес, телефон, категорию деятельности
• Укажите сайт, часы работы, загрузите фотографии
• Подтвердите права на организацию (по телефону или другим способом)

После проверки (обычно 1–3 рабочих дня) ваша компания появится на Яндекс Картах. Важно: поддерживайте актуальность данных — алгоритм Яндекса учитывает полноту и актуальность информации при ранжировании в локальном поиске.

FAQ — частые вопросы

Карта не отображается — что проверить

Если карта не появляется на странице, проверьте по порядку:

• Код iframe вставлен полностью — иногда при копировании теряется закрывающий тег </iframe>
• Сайт использует HTTPS — iframe с карты Яндекса также работает по HTTPS, смешанного контента быть не должно
• JavaScript не заблокирован — если у пользователя отключён JS, iframe всё равно работает, но API-карта — нет
• Размеры контейнера заданы — если у блока нет высоты (height: 0 или не задана), карта невидима
• CSP (Content Security Policy) не блокирует iframe — проверьте заголовки сервера
• CMS не фильтрует iframe — в WordPress некоторые плагины безопасности блокируют внешние iframe

Для быстрой диагностики: откройте страницу в браузере → нажмите F12 → вкладка Console. Ошибки с картой будут видны там.

Как изменить карту после вставки

Если карта создана через конструктор: зайдите на yandex.ru/map-constructor → откройте вашу карту → внесите изменения → сохраните. Код iframe останется тем же — изменения применятся автоматически без повторной вставки кода.

Если карта вставлена прямо из Яндекс Карт (через кнопку «Поделиться»): нужно найти нужное место заново, получить новый код и заменить старый iframe на сайте.

Бесплатен ли iframe-способ

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

JavaScript API бесплатен до 1000 запросов в сутки. Если ваш сайт получает более 30 000 уникальных посетителей в день и у каждого загружается карта — возможно, придётся платить. Для большинства сайтов это нереальная нагрузка.

Отличие iframe от API: что выбрать

Заключение

Добавить Яндекс Карту на сайт можно за 5 минут без знания программирования — достаточно создать карту в конструкторе и вставить iframe. Для WordPress и Joomla используйте блок HTML без дополнительных плагинов — это надёжнее. JavaScript API оставьте для случаев, когда карта — это полноценный функциональный элемент сайта с динамическими данными и сложным взаимодействием.

После добавления карты на сайт не забудьте зарегистрировать организацию в Яндекс Бизнесе — это отдельная задача, которая влияет на видимость вашей компании в поиске Яндекс Карт.