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

Коротко: Яндекс Карту на сайт добавляют тремя способами. Самый быстрый — скопировать iframe в самих Картах («Поделиться» → «Код для сайта»). Если нужны свои метки, маршруты и оформление, карту собирают в Конструкторе карт Яндекса и вставляют его код (JavaScript или iframe). Полностью управляемая карта подключается через JavaScript API с обязательным API-ключом.

Карта на странице «Контакты» заметно снижает число вопросов «как до вас добраться», а адрес и схема проезда нужны и клиентам, и поисковым системам. Ниже — сравнение способов, пошаговые инструкции, пример кода и список типичных ошибок: карта не отображается, ломает вёрстку или тормозит страницу.

Три способа вставить карту: что выбрать

Способ	Подходит, когда	Ограничения	Нужен ли ключ
iframe из Яндекс Карт	Нужна одна точка с адресом компании	Минимум настроек, оформление по умолчанию	Нет
Конструктор карт Яндекса	Нужно несколько меток, линии, области, схема проезда	Через iframe выводится только слой «Схема»; часть возможностей доступна только в JavaScript-варианте кода	Нет для базового кода; для платных сценариев — по условиям API
JavaScript API Яндекс Карт	Нужна карта со своей логикой: фильтры точек, кластеры, клики, маршрут	Требует разработчика и поддержки кода	Да, API-ключ обязателен даже для бесплатной версии

Способ 1. Готовый iframe из Яндекс Карт

1. Откройте Яндекс Карты и найдите адрес или карточку организации.
2. В меню нажмите «Поделиться» и выберите «Код для сайта».
3. Скопируйте код iframe.
4. Вставьте код в HTML страницы там, где должна быть карта: в блок «HTML-код» конструктора сайта, в Gutenberg-блок «Произвольный HTML» в WordPress или прямо в шаблон.

Чтобы карта подстраивалась под экран телефона, задайте ширину в процентах, а высоту — фиксированной:

<iframe src="https://yandex.ru/map-widget/v1/?..." width="100%" height="400" frameborder="0" loading="lazy"></iframe>

Атрибут loading="lazy" откладывает загрузку карты, пока посетитель не доскроллит до неё. Это важно для скорости страницы: карта подтягивает несколько десятков запросов.

Способ 2. Конструктор карт Яндекса

Конструктор карт — веб-инструмент для схем проезда и карт с несколькими объектами. Он подходит для страницы «Как нас найти», карты филиалов, маршрута экскурсии.

1. Откройте Конструктор карт Яндекса и найдите нужное место.
2. Добавьте метки, линии и области, подпишите их, выберите цвета и значки.
3. В блоке «Код для сайта» выберите формат: JavaScript или iframe.
4. Нажмите «Получить код карты» и вставьте код на страницу.

У iframe-варианта есть важное ограничение: он выводит на сайт только карту со слоем «Схема». Спутниковый слой и гибрид доступны только в JavaScript-варианте, а некоторые объекты через iframe показать нельзя. Если карта должна быть печатной (схема проезда в PDF), в Конструкторе можно скачать её как PNG или JPG и выбрать качество изображения.

Способ 3. JavaScript API Яндекс Карт

Для интерактивных карт используют JavaScript API 2.1. По документации Яндекса, API-ключ — обязательное условие использования бесплатной версии. Ключ выдаётся в Кабинете разработчика: нажмите «Получить ключ» и выберите сервис «JavaScript API».

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

<div id="map" style="width:100%;height:400px"></div>
<script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_КЛЮЧ&lang=ru_RU"></script>
<script>
ymaps.ready(function () {
  var map = new ymaps.Map('map', { center: [55.751244, 37.618423], zoom: 15 });
  map.geoObjects.add(new ymaps.Placemark([55.751244, 37.618423], { balloonContent: 'Наш офис' }));
});
</script>

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

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

Платформа	Что делать
Tilda	Блок «HTML-код» (T123) или блок «Карта» с нужным адресом; вставьте iframe
WordPress	Блок «Произвольный HTML» в редакторе страницы либо виджет «HTML» в боковой панели
Конструкторы с блоком «HTML/код»	Добавьте блок на страницу и вставьте iframe или скрипт
«1С-Битрикс»	Компонент «Яндекс.Карта» (bitrix:map.yandex.view) в визуальном редакторе
Свой шаблон	Вставьте iframe или контейнер и скрипт API в нужное место разметки

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

Частые ошибки и как их исправить

• Карта не отображается. Проверьте, что в коде нет лишних символов после копирования, а блок «HTML» не режет теги. Для JavaScript API — что указан действующий API-ключ и подключён один экземпляр скрипта.
• Карта сжата в полоску. У контейнера не задана высота. Укажите её в пикселях.
• Карта выходит за границы экрана на телефоне. Задайте ширину 100%, а не фиксированные пиксели.
• Страница стала грузиться медленнее. Добавьте loading="lazy" к iframe или подключайте API после первого скролла.
• Нужен спутниковый слой в iframe. Это ограничение iframe-варианта Конструктора: используйте JavaScript-код или API.
• Метка в неправильном месте. Проверьте порядок координат: в Яндекс Картах он «широта, долгота».

Что ещё добавить рядом с картой

Одной карты на странице «Контакты» недостаточно. Рядом разместите адрес текстом, график работы, телефон и описание, как пройти от метро или остановки. Тот же адрес, телефон и название компании должны совпадать с данными в карточке организации на Яндекс Картах: расхождения путают клиентов. Если вы ведёте бизнес на Картах, подготовьте и ответы на отзывы — об этом в статье «Как отвечать на отзывы на Яндекс Картах».