# Яндекс Карта на сайте: как добавить и что показать

4 ноября 2026 г. · 3 мин чтения · Студия AETHER · https://aether-studio.ru/blog/yandeks-karta-na-sajt

Карта на странице контактов отвечает на вопрос «как к вам добраться» быстрее любого текста. Добавить её можно за несколько минут и без программиста — через конструктор Яндекс Карт или виджет прямо из карточки компании. Разбираем способы вставить карту, как показать рядом отзывы с Яндекс Карт, что ещё нужно на странице контактов и как сделать, чтобы карта не тормозила сайт.

## Зачем карта на сайте

- **Показать, где вы**, — особенно если вход со двора, в торговом центре или за шлагбаумом.
- **Проложить маршрут** в один клик — в Яндекс Картах или Навигаторе.
- **Добавить доверия**: настоящий адрес, который можно проверить.

Нужна карта не всем. Онлайн-сервису или магазину без самовывоза хватит адреса в реквизитах.

## Способ первый: конструктор карт

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

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

## Способ второй: виджет из Яндекс Карт

Если у компании есть карточка в Яндекс Картах, найдите её, откройте меню «Поделиться» и скопируйте код из поля «Виджет с картой». На сайте появится карта с вашей организацией. Так же можно вставить карту с готовым маршрутом — например, от метро до входа.

## Способ третий: ссылка вместо карты

Если карта на странице не нужна, а маршрут нужен, поставьте ссылку на карточку компании в Яндекс Картах или кнопку «Построить маршрут». Это самый лёгкий вариант: страница не грузит лишнего, а человек сразу попадает в приложение, где у него и навигатор, и отзывы.

## Для разработчиков: JavaScript API

Если нужно больше, чем одна метка, — филиалы со списком, свой стиль карты, фильтры, — разработчик собирает карту через JavaScript API Яндекс Карт. Для него нужен ключ разработчика. Бесплатно API можно использовать на сайтах, открытых для всех, и в пределах суточных лимитов — например, 1 000 запросов к геокодеру в день. Для остального есть платные тарифы.

## Отзывы с Яндекс Карт на сайте

У Яндекс Карт есть официальный виджет с отзывами: в карточке организации откройте «Поделиться» и выберите «Виджет с отзывами». Он показывает отзывы так же, как на Картах, и корректно работает при ширине от 300 до 760 пикселей и высоте от 500 — под него нужно место на странице.

Такие отзывы — независимый источник: их нельзя отредактировать, поэтому им доверяют больше, чем отзывам на самом сайте. Как ещё показывать отзывы, — в статье [«Отзывы на сайте»](https://aether-studio.ru/blog/otzyvy-na-sajte), а о карточке компании — [«Яндекс Бизнес и сайт»](https://aether-studio.ru/blog/yandeks-biznes-i-sajt).

## На Тильде

В Тильде есть готовые блоки с картой, но для карт Яндекса нужен свой ключ JavaScript API. Его получают в кабинете разработчика Яндекса, в ограничениях ключа указывают домен сайта и домен Тильды, а сам ключ вставляют в настройках сайта в раздел «Ещё» → «Ключи от API карт». Пошагово это описано в справке Тильды.

Если возиться с ключом не хочется, код из конструктора Яндекс Карт можно вставить в блок для своего HTML-кода: ключ ему не нужен.

## Что показать рядом с картой

- **Адрес текстом** — его можно скопировать, и его читают поисковики.
- **Как найти вход**: ориентиры, этаж, подъезд, фото входа.
- **Парковка и общественный транспорт.**
- **Часы работы и телефон** — чтобы не ехать в закрытый офис.
- **Кнопка «Построить маршрут»** — на телефоне это удобнее, чем двигать карту пальцем.

## Карта и скорость

Интерактивная карта загружает много скриптов и заметно утяжеляет страницу. Поэтому её подгружают, только когда до неё дошла прокрутка, или ставят вместо неё статическую картинку со ссылкой «Открыть в Яндекс Картах». И проверьте страницу на телефоне: карта не должна перехватывать прокрутку, когда человек просто листает вниз. Как проверить скорость, разобрано в статье [«Скорость загрузки сайта»](https://aether-studio.ru/blog/skorost-zagruzki-sajta).

## Как это делаем мы

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

**Услуга «Корпоративный сайт»:** от 7 рабочих дней, от 45 000 ₽, обычно 45 000–130 000 ₽. Подробнее: https://aether-studio.ru/services/corporate

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.