Как добавить Яндекс Карты на сайт Turbosite
Яндекс Карты — основной картографический сервис для российской аудитории. Есть два простых способа добавить карту на сайт: через Конструктор карт (рисуете маршрут или ставите метки сами) или прямо из Яндекс Карт (карточка организации с отзывами и контактами). Оба варианта дают готовый HTML-код для вставки. Бесплатно, API-ключ не нужен. Установка занимает 5–10 минут.
Что понадобится
- Аккаунт на Яндексе — бесплатная регистрация
- Опубликованный сайт на Turbosite
- 5–10 минут
Способ 1: карточка организации из Яндекс Карт (если у вас уже есть компания на Картах)
Это самый быстрый способ — даёт карту с меткой, отзывами и кнопкой «Построить маршрут».
- Откройте yandex.ru/maps и найдите свою компанию в поиске.
- На странице компании нажмите кнопку «Поделиться» (значок со стрелкой) → выберите вкладку «Виджет».
- Настройте предпросмотр (размер, метка, информация о компании).
- Скопируйте код для вставки на сайт.
📷 Скриншот: карточка организации в Яндекс Картах с открытым окном «Поделиться → Виджет».
Способ 2: своя карта через Конструктор карт (если нужно несколько меток или маршрут)
- Откройте yandex.ru/map-constructor.
- Найдите нужную точку на карте.
- Добавьте метки, линии или области по необходимости.
- Нажмите «Сохранить и продолжить» → задайте размеры карты.
- Нажмите «Получить код карты» → выберите формат «iframe».
- Скопируйте код.
📷 Скриншот: Конструктор карт Яндекса с настроенными метками и сгенерированным iframe-кодом.
Шаг 3. Вставить код в Turbosite
Карта появляется в определённом месте страницы (например, в блоке «Контакты»), поэтому код вставляется в тело страницы, а не в <head>.
- Откройте ваш сайт в Turbosite.
- Добавьте блок «HTML-код» в нужное место страницы — обычно в секцию контактов.
- Вставьте скопированный код карты.
- Сохраните изменения.
- Опубликуйте сайт.
📷 [скриншот Turbosite — будет добавлен: блок HTML-код в теле страницы с картой].
Шаг 4. Проверить, что карта работает
- Откройте опубликованный сайт.
- Прокрутите до блока с картой — она должна загрузиться через 1–2 секунды.
- Проверьте на мобильном устройстве: карта должна корректно масштабироваться.
Если карта обрезается на мобильных — настройте размеры заново в Конструкторе с галочкой «Растянуть по ширине».
Частые вопросы
Можно ли добавить несколько меток или маршрут? Да, через Конструктор карт (Способ 2). В нём можно нарисовать маршрут, добавить полигон, поставить много меток разных цветов.
Карта тормозит загрузку сайта. Iframe-карта подгружается асинхронно и не блокирует страницу. Если карта на странице одна — проблем не будет. Если карт много или сайт перегружен — можно использовать lazy-load (загрузка по клику).
Можно ли поставить карту с моими данными (фирменный стиль, цвета)? В базовом iframe — нет, дизайн стандартный. Полная кастомизация — через JavaScript API Яндекс Карт, но это требует разработчика и API-ключа.
Нужен ли API-ключ для базовой карты? Нет. Карты из Конструктора или из карточки компании вставляются без ключа. Ключ нужен только для JavaScript API.
Как добавить отзывы Яндекс Карт? Это отдельный виджет — в карточке компании на Яндекс Картах → «Поделиться» → «Виджет с отзывами». Вставляется так же, через блок HTML.
Куда смотреть дальше
- Конструктор карт Яндекса — основной инструмент
- Справка Конструктора карт — официальная документация
- API Яндекс Карт — для тонкой настройки
