Коротко
Добавить Яндекс Карту на сайт можно тремя способами: собрать карту в Конструкторе Яндекс Карт и вставить готовый код, встроить карту организации из Яндекс Карт через iframe или подключить JavaScript API Яндекс Карт, если нужны несколько адресов, фильтры и своя логика. Для сайта компании с одним-двумя офисами обычно хватает конструктора: это бесплатно и занимает 10–15 минут.
Карта — это не только точка на странице «Контакты». Рядом с ней посетителю нужны адрес текстом, кнопка «Построить маршрут», часы работы и, если есть, рейтинг и отзывы. А владельцу сайта важно, чтобы карта не замедляла загрузку страницы и не ломала вёрстку на телефоне.
| Способ | Когда подходит | Сложность | Гибкость |
|---|---|---|---|
| Конструктор карт | 1–10 адресов, своя подпись и метки | Низкая | Средняя |
| Карта организации через iframe | Показать карточку компании из Яндекс Карт | Низкая | Низкая |
| JavaScript API | Много адресов, фильтры, своя логика | Высокая | Высокая |
| Статическая картинка | Нужен быстрый лёгкий вариант | Низкая | Минимальная |
Основная мысль
Карта на сайте решает одну задачу — помочь человеку доехать или дойти до вас, поэтому ценность дают адрес, маршрут и отзывы рядом с картой, а сама карта не должна тормозить страницу.
Часто карту вставляют «как есть»: огромный блок во всю ширину, который перехватывает прокрутку на телефоне и грузит тяжёлые скрипты ещё до того, как посетитель до него долистал. Страница становится медленнее, а пользы не прибавляется.
Правильный подход: подобрать способ под задачу, загрузить карту лениво, добавить кнопку маршрута и продублировать адрес текстом. Ниже — пошаговые инструкции для конструктора, iframe и API, особенности WordPress и 1С-Битрикс, работа с отзывами и типичные ошибки.
Конструктор Яндекс Карт: карта на сайт без программиста
Конструктор карт — бесплатный сервис Яндекса, где можно собрать карту с метками, подписями, линиями и областями и получить код для вставки. Карта хранится в вашем аккаунте Яндекса, и её можно отредактировать позже.
Пошаговая инструкция
- Войдите в аккаунт Яндекса компании и откройте Конструктор карт.
- Найдите свой адрес через поиск или поставьте метку вручную.
- Добавьте название и описание метки: название компании, вход со двора, этаж.
- Выберите цвет и вид метки. Если адресов несколько, добавьте каждую точку.
- При необходимости нарисуйте линию — например, путь от метро до входа — или выделите область парковки.
- Сохраните карту и перейдите к получению кода.
- Выберите вид карты — интерактивная или статическая — и размер. Для адаптивной вёрстки ширину лучше задать в процентах, если конструктор это позволяет, или поправить после вставки.
- Скопируйте код и вставьте его на страницу сайта.
Интерактивная или статическая карта
Интерактивная карта позволяет перемещаться, приближать и открывать метки. Статическая — это картинка с точкой без интерактива. Статическая загружается быстрее и подходит для небольших блоков, например в подвале сайта. Для страницы «Контакты» обычно выбирают интерактивную.
Как отредактировать карту потом
Если вы изменили карту в конструкторе и сохранили, обновлённая версия появится и на сайте — код обычно менять не нужно. Но если меняли размер или вид карты, код лучше получить заново.
Чей аккаунт использовать
Карта из конструктора привязана к аккаунту, в котором её создали. Если это личный аккаунт сотрудника или подрядчика, после его ухода изменить карту будет невозможно — придётся создавать новую и менять код на сайте. Поэтому карты, как и счётчики аналитики, создают на общем аккаунте компании, доступ к которому остаётся у владельца бизнеса. Это же касается ключей API и кабинета организации в Яндекс Бизнесе.
Где взять код Яндекс Карты для сайта
Если нужно просто показать организацию, как она выглядит в Яндекс Картах, конструктор не обязателен. Код можно получить из самих Яндекс Карт.
Как показать адрес на Яндекс Карте на сайте
- Откройте Яндекс Карты и найдите свою организацию или адрес.
- В меню «Поделиться» найдите вариант получения кода для вставки на сайт.
- Скопируйте код iframe и вставьте его на страницу.
Названия пунктов в интерфейсе Яндекс Карт периодически меняются. Если нужного варианта не видно, используйте конструктор: он даёт тот же результат с большим контролем над видом.
Чем iframe отличается от кода с JavaScript
Iframe встраивает страницу Яндекс Карт в окно на вашем сайте — по сути, это готовый виджет Яндекс Карты на сайт без программирования. Это просто и изолированно: стили сайта не ломают карту, а карта не ломает сайт. Код с JavaScript подключает библиотеку карт прямо на страницу. Он гибче, но тяжелее и требует аккуратности при вставке.
Пример вставки iframe с ленивой загрузкой
<iframe
src="АДРЕС_КАРТЫ_ИЗ_КОДА_ЯНДЕКСА"
width="100%"
height="400"
frameborder="0"
loading="lazy"
title="Как нас найти">
</iframe>Атрибут loading=»lazy» говорит браузеру загружать карту, только когда посетитель долистает до неё. Атрибут title нужен для доступности: экранные дикторы озвучивают его пользователям.
Как добавить Яндекс Карту на сайт WordPress и 1С-Битрикс
Сам код карты одинаковый для любой CMS. Отличается только место, куда его вставлять.
WordPress
В редакторе блоков добавьте блок «Пользовательский HTML» на нужную страницу и вставьте в него код карты. Для iframe этого достаточно. Код со script в блоке HTML сохраняется, только если у пользователя есть права на вставку произвольного HTML, — обычно это администратор.
Если карта должна быть на всех страницах, например в подвале, её вставляют в виджет подвала или в шаблон темы. Правки шаблона делают в дочерней теме, чтобы они не пропали при обновлении. Если нужна карта с несколькими филиалами и списком адресов, лучше сделать отдельный блок или шорткод, чем плагин ради одной страницы.
Конструкторы страниц вроде Elementor имеют свои виджеты для карт, но часто по умолчанию используют Google Maps. Для Яндекс Карт вставляйте код через HTML-виджет.
1С-Битрикс
В 1С-Битрикс есть стандартные компоненты для Яндекс Карт, например «Яндекс.Карта» (bitrix:map.yandex.view). В параметрах компонента задают центр, масштаб, метки и подписи. Для работы компонента может понадобиться ключ API, поле для него находится в настройках модуля.
Простой вариант — вставить iframe или код из конструктора в визуальном редакторе страницы в режиме HTML или во включаемую область «Контактов». Во многих готовых решениях 1С-Битрикс карта уже встроена в страницу контактов и настраивается в параметрах решения.
Сценарий: сеть автосервисов
У сети четыре точки в городе. На странице «Контакты» — одна карта со всеми метками, а под ней список адресов с часами работы и телефонами. Клик по адресу в списке центрирует карту на нужной точке. Такую связку проще сделать через API, чем через конструктор. Подробнее о структуре таких сайтов — в статье о сайте для автосервиса.
API Яндекс Карт на сайте: когда нужен
JavaScript API подключают, когда возможностей конструктора не хватает. Это работа для разработчика, но результат гибче.
Задачи для API
- Десятки и сотни точек с группировкой близких меток в кластеры.
- Фильтры: показать только магазины с пунктом выдачи или только открытые сейчас.
- Связь карты со списком адресов на странице.
- Выбор пункта самовывоза при оформлении заказа.
- Своя графика меток и балунов в стиле сайта.
Ключ API
Для работы API нужен ключ, который получают в кабинете разработчика Яндекса. В настройках ключа стоит ограничить его использование доменом вашего сайта, чтобы чужие сайты не тратили ваши лимиты.
Условия бесплатного использования и тарифы для коммерческого применения задаёт Яндекс и периодически меняет. Перед разработкой проверьте актуальные условия в документации API: от них зависит, подходит ли бесплатный вариант для вашего сайта.
Версии API
У API есть несколько версий, и новые проекты разумно делать на актуальной. Если сайт давно использует старую версию, при доработке стоит оценить, не пора ли переходить: поддержка старых версий со временем прекращается.
Маршрут до офиса с Яндекс Картами
Посетитель открывает карту, чтобы понять, как доехать. Поэтому кнопка маршрута полезнее, чем сама карта.
Кнопка «Построить маршрут»
Самый простой способ — ссылка на Яндекс Карты с параметрами маршрута. Посетитель нажимает кнопку, открываются Яндекс Карты (на телефоне — приложение, если оно установлено), и маршрут строится от его текущего местоположения до вашего адреса. Формат ссылки с координатами точки назначения описан в документации Яндекс Карт.
Кнопку стоит сделать заметной и разместить рядом с адресом, а на мобильной версии — в первом экране страницы контактов. Для тех, кто пользуется другим навигатором, можно добавить вторую ссылку или просто дать координаты текстом.
Маршрут на самой карте
Показать маршрут прямо на карте сайта можно через API. Это нужно редко: пользователю удобнее вести маршрут в навигаторе, а не на сайте. Исключение — сложный подъезд, например к складу или на территорию завода. Тогда полезна заранее нарисованная в конструкторе линия от въезда до нужного корпуса.
Текстовое описание пути
Рядом с картой добавьте текст: как пройти от метро или остановки, где вход, есть ли парковка. Это помогает тем, кто не любит карты, и полезно для поиска: адрес и ориентиры становятся текстом на странице.
Отзывы с Яндекс Карт на сайте
Рейтинг и отзывы из Яндекс Карт — сильный аргумент для нового клиента. Показать их на сайте надёжнее всего через официальный виджет.
Виджет отзывов Яндекс Карт на сайт
У организации, подтверждённой в Яндекс Бизнесе, в личном кабинете есть инструменты для сайта, в том числе виджеты с рейтингом и отзывами. Код виджета вставляется так же, как код карты: в блок HTML или шаблон. Набор виджетов и их вид определяет Яндекс, поэтому смотрите актуальные варианты в кабинете.
Чего не делать
- Не копируйте отзывы вручную на сайт как «отзывы наших клиентов» без указания источника.
- Не используйте сомнительные сервисы, которые собирают отзывы с Яндекс Карт в обход их правил: такие виджеты перестают работать в любой момент.
- Не размечайте чужие отзывы микроразметкой рейтинга как собственные. Как правильно размечать данные организации, описано в статье про микроразметку Schema.org.
Сценарий: ресторан
Для ресторана рейтинг в Яндекс Картах часто решает выбор. На главной странице — виджет с рейтингом, на странице «Контакты» — карта, кнопка маршрута и кнопка бронирования. Как устроить сайт ресторана целиком, разобрано в статье о сайте для ресторана или кафе.
Какую карту выбрать под задачу бизнеса
Один и тот же инструмент по-разному работает в разных нишах. Ниже — типовые ситуации и решения, которые в них подходят.
Производство и склад
Грузовому транспорту важен не адрес офиса, а въезд на территорию, КПП и место разгрузки. В конструкторе отмечают отдельные точки для офиса и для въезда грузовиков, рисуют линию проезда по территории и подписывают ворота. Рядом с картой — часы приёмки, телефон диспетчера и требования к пропуску.
Клиника с несколькими филиалами
Пациент выбирает ближайший филиал, а затем записывается к врачу. На странице «Контакты» — карта со всеми филиалами, а на странице каждого филиала — своя карта с одной меткой, кнопкой маршрута и расписанием. Если на сайте есть онлайн-запись, кнопку записи ставят рядом с картой филиала.
Интернет-магазин с пунктами самовывоза
Покупатель выбирает пункт выдачи при оформлении заказа. Здесь нужна карта на API: точки загружаются из базы магазина, при выборе метки её адрес подставляется в заказ. Пункты служб доставки обычно выводятся через модули самих служб, а собственные точки самовывоза — через доработку.
Проверка после установки
После вставки карты откройте страницу на компьютере и на телефоне. Проверьте, что метка стоит у входа, подпись читается, кнопка маршрута открывает Яндекс Карты с правильной точкой назначения, а страница не прыгает при загрузке карты. Затем проверьте скорость страницы до и после вставки.
Карта и скорость сайта
Интерактивная карта — один из самых тяжёлых элементов страницы. Она подгружает скрипты, стили и плитки карты с серверов Яндекса.
Как карта влияет на Core Web Vitals
Ориентиры Core Web Vitals: LCP ≤ 2,5 с, INP ≤ 200 мс, CLS ≤ 0,1. Карта, загружаемая сразу, конкурирует за сеть с основным контентом и может ухудшить LCP. Если у блока карты не задана высота, при её загрузке страница сдвигается и растёт CLS.
Как ускорить
- Не ставьте интерактивную карту на главную, если она там не нужна: достаточно адреса и ссылки на контакты.
- Загружайте карту лениво: iframe с loading=»lazy» или подключение скрипта, когда блок появился в зоне видимости.
- Задайте блоку карты фиксированную высоту, чтобы не было сдвига вёрстки.
- Рассмотрите вариант «картинка + кнопка»: сначала показывается статичное изображение, а по клику загружается интерактивная карта.
- Не подключайте API на всех страницах сайта, если карта есть только на «Контактах».
Если сайт уже медленный и карта — лишь одна из причин, поможет комплексное ускорение сайта.
Карта и прокрутка на телефоне
Интерактивная карта во весь экран перехватывает жест прокрутки: посетитель пытается пролистать страницу, а двигает карту. Решение — отключить масштабирование колесом и перетаскивание на мобильных до касания или сделать карту ниже по высоте.
Карта Яндекса загружается со сторонних серверов и может использовать cookie. Это стоит учесть в документах сайта и в баннере cookie.
Если на сайте настроена блокировка сторонних сервисов до согласия, карта может не показываться посетителям, которые не нажали «Принять». Нужна заглушка с адресом и ссылкой на Яндекс Карты. Техническая сторона такой настройки описана в статье про уведомление о cookie на сайте. Формулировки документов лучше сверить с юристом.
Ошибки при размещении карты на сайте
Ниже — то, что встречается на сайтах компаний чаще всего.
Карта без адреса текстом
Адрес есть только на карте. Поисковик его не видит, а посетитель не может скопировать его в навигатор.
Неверная точка
Метка стоит по центру здания, а вход с другой улицы. Клиенты ходят кругами и звонят. Проверьте точку сами и подпишите вход.
Тяжёлая карта на каждой странице
Карта в подвале на всех страницах сайта грузит скрипты везде. Скорость проседает на всём сайте.
Устаревшая карта
Офис переехал, а на карте старый адрес. Или карта сделана в конструкторе на аккаунте бывшего сотрудника, и изменить её никто не может.
Карта ломает вёрстку на телефоне
Фиксированная ширина в пикселях выходит за экран, появляется горизонтальная прокрутка.
Чек-лист: карта на сайте
- Выбран способ: конструктор, iframe или API.
- Карта создана на аккаунте компании.
- Метка стоит у входа, а не в центре здания.
- Рядом с картой есть адрес текстом, часы работы и телефон.
- Есть кнопка «Построить маршрут».
- Описан путь от метро или остановки и парковка.
- Карта загружается лениво и имеет фиксированную высоту.
- На телефоне карта не перехватывает прокрутку и не выходит за экран.
- Ключ API ограничен доменом сайта.
- Учтены cookie и заглушка на случай блокировки.
- Отзывы выводятся официальным виджетом, а не копией.
Частые вопросы
Как вставить Яндекс Карту на сайт бесплатно?
Через Конструктор Яндекс Карт или код для вставки из самих Яндекс Карт. Оба варианта бесплатные и не требуют программирования.
Как разместить Яндекс Карту на сайте WordPress?
Получите код в конструкторе и вставьте его в блок «Пользовательский HTML» на нужной странице. Для всех страниц — в виджет подвала или шаблон дочерней темы.
Как встроить Яндекс Карты на сайт 1С-Битрикс?
Через стандартный компонент Яндекс Карты или вставкой кода из конструктора в визуальном редакторе в режиме HTML. Во многих готовых решениях карта уже есть на странице контактов.
Нужен ли ключ API, чтобы добавить карту?
Для конструктора и iframe обычно нет. Для JavaScript API — да, ключ получают в кабинете разработчика Яндекса.
Как показать на карте несколько адресов?
В конструкторе можно добавить несколько меток. Если адресов много и нужна связь со списком или фильтры, используют API.
Как добавить отзывы с Яндекс Карт на сайт?
Подтвердите организацию в Яндекс Бизнесе и используйте виджет из личного кабинета. Копировать отзывы вручную без указания источника не стоит.
Почему карта не отображается на сайте?
Частые причины: код вставлен в поле, которое удаляет скрипты, карту блокирует баннер cookie до согласия, или ошибка в ключе API. Проверьте консоль браузера и режим вставки HTML.
Замедляет ли карта сайт?
Да, если загружается сразу. Ленивая загрузка, фиксированная высота блока и отказ от карты на страницах, где она не нужна, решают проблему.
Как сделать кнопку маршрута до офиса?
Сделайте ссылку на Яндекс Карты с параметрами маршрута и координатами вашего адреса. На телефоне она откроет приложение с готовым маршрутом.
Можно ли изменить вид меток на карте?
В конструкторе можно выбрать цвет и тип метки. Полностью свою графику меток, например логотип компании, делают через API.
Как добавить карту в подвал сайта?
Технически — через виджет подвала или шаблон. Но интерактивная карта на всех страницах замедляет сайт. В подвале лучше оставить адрес текстом и ссылку на страницу контактов или статичную картинку.
Итог
Добавить Яндекс Карту на сайт проще всего через конструктор: несколько минут — и карта с вашими метками на странице. Если нужно больше адресов, фильтры или выбор пункта самовывоза, подключают API Яндекс Карт.
Рядом с картой обязательно нужны адрес текстом, кнопка маршрута и описание пути, а сама карта должна загружаться лениво и не мешать на телефоне. Отзывы показывайте через официальный виджет, а не копией.
Если нужно аккуратно встроить карту, маршрут и отзывы в сайт, я как частный разработчик сделаю это на WordPress или 1С-Битрикс без потери скорости. Подробнее — на странице доработки сайтов на WordPress. Работаю напрямую, без посредников.
