Для обычной схемы проезда подойдёт Конструктор карт Яндекса. Создайте карту с меткой и получите код для страницы контактов. Затем откройте сайт с телефона и проверьте конечную точку маршрута до нужного входа. Рядом оставьте адрес с описанием входа. Добавьте телефон на случай, если карта не откроется.
- Нужна схема проездаСоберите карту с меткой в Конструкторе Яндекса.
- Сайт на конструктореВыберите готовый блок карты или вставку HTML.
- Нужна своя логикаПередайте разработчику задачу для JavaScript API.
- Клиенты путают входПроверьте метку и пройдите путь с телефона.
Какой способ выбрать
Для мастерской или салона начните со схемы проезда в Конструкторе карт. Готовый блок удобен, если вы уже редактируете сайт в визуальном редакторе, а API выбирайте под задачу, которую нельзя собрать штатными средствами.
Код Конструктора и самостоятельное подключение JavaScript API различаются. Без ключа у JavaScript-кода Конструктора нет поиска и кнопок построения маршрутов. Просмотр панорам тоже недоступен, поэтому ссылку для перехода в Карты лучше оставить рядом.
| Признак | Конструктор Яндекса | Блок или виджет платформы | JavaScript API |
|---|---|---|---|
| Кому подходит | Нужна схема проезда с меткой и подписью | Владелец редактирует сайт на Тильде или WordPress | Разработчик делает карту со своей логикой и интерфейсом |
| Нужен ли ключ | Для базового JavaScript-кода не обязателен. Поиск и кнопки маршрутов требуют ключа; просмотр панорам тоже. iframe вставляйте готовым кодом Яндекса. Условия JS-вставки · Готовый iframe | В штатном блоке Тильды нужен. Для WordPress-плагина Rusnet подготовьте ключ Яндекса и добавьте в настройки плагина. Тильда · Rusnet | Нужен ключ для JavaScript API. Быстрый старт Яндекса |
| Бесплатно ли | Сам Конструктор бесплатный. Ответ Яндекса | Для Тильды API можно использовать бесплатно при условиях Яндекса; платный тариф сайта оплачивается отдельно. Автор WordPress-плагина Rusnet сообщает, что все его функции бесплатны, но условия API Яндекса сохраняются. Тильда и API · Тарифы сайта · Rusnet · Условия API | Бесплатно при соблюдении условий Яндекса, иначе нужна платная лицензия. Условия бесплатного использования |
| Что потребуется | Создать карту и вставить готовый код | Настроить блок; для API добавить ключ | Нужен разработчик, который подключит и проверит карту |
Источники: API Конструктора · ответы Яндекса · справка Тильды · HTML-блок WordPress · быстрый старт API.
Как собрать карту в Конструкторе Яндекса
Официальная справка ведёт в Конструктор через профиль Яндекс Карт и пункт Мои карты. Если вы не вошли в аккаунт, сначала авторизуйтесь, затем создайте карту.
Если нужна карта уже найденного объекта, откройте Поделиться и скопируйте код из поля Виджет с картой. Для собственной метки и подписи используйте Конструктор по шагам ниже.
- 1Нажмите Создать карту. В редакторе выберите инструмент метки под поисковой строкой и укажите нужную точку.
- 2Задайте подпись метки и текст, который появится при нажатии. Сохраните метку кнопкой Готово.
- 3Дайте карте название, чтобы потом найти её в списке. Нажмите Сохранить и продолжить.
- 4Выберите интерактивный тип карты. Задайте размер области, которую хотите показать на сайте; опция Растянуть по ширине подстраивает карту под ширину блока.
- 5Нажмите Получить код карты. Скопируйте вариант iframe или JavaScript, который поддерживает редактор вашего сайта. В справке Конструктора для iframe указаны ограничения: только вид Схема и крупные масштабы.
- 6Скопируйте ссылку из поля Ссылка на Яндекс Карты на панели Тип карты. Разместите её рядом с картой и проверьте, куда ведёт маршрут после перехода с телефона.
Источники: как открыть Конструктор · создание карты · создание метки · размер и получение кода · готовый виджет через Поделиться.
Куда вставить код на вашем сайте
На Тильде добавьте HTML-блок из категории Другое и вставьте код карты в его содержимое. Проверяйте опубликованную страницу: в редакторе и предпросмотре такой код показывается текстом.
Для готового блока карты на Тильде выберите источник Yandex и настройте метки. Ключ добавляется в Настройках сайта, в разделе Еще, Ключи от API карт; после сохранения страницы нужно перепубликовать. Подробнее о платформе: сайт на Тильде.
В WordPress добавьте блок Custom HTML и вставьте код iframe, если права вашей учётной записи разрешают сохранять такой код. Без разрешения unfiltered_html (сохранять HTML без фильтрации) WordPress удаляет запрещённые теги при сохранении. При работе через плагин карты следуйте инструкции его автора; общий порядок работы с платформой есть в статье о сайте на WordPress.
Если нужен интерфейс для редактирования меток, пример плагина из каталога WordPress.org приведён в сравнении выше: Rusnet Interactive Map. В его настройках задаются карта и ключ Яндекс API. Перед установкой проверьте совместимость плагина с вашим сайтом.
Для сайта в HTML на хостинге передайте код тому, кто редактирует страницу контактов. JavaScript-код Конструктора можно разместить в теле страницы; вставка в head требует отдельного указания контейнера, поэтому переносить его туда наугад не стоит.
Не хочется разбираться с кодом и настройками: поставить карту можно поручить специалисту. Напишите в Telegram, бесплатно посмотрим страницу контактов и скажем, что нужно сделать. Написать в Telegram ›
Источники: вставка HTML в Тильде · готовые блоки карт · настройка ключа · HTML-блок WordPress · плагин карты для WordPress · размещение кода Конструктора.
Если карта не показывается или метка стоит не там
Сначала определите способ вставки: готовый iframe или JavaScript-код Конструктора. Если карту подключили самостоятельно через API, проверьте это подключение отдельно. Ошибку ключа имеет смысл искать у подключения с ключом, а исчезнувший после сохранения iframe проверять в редакторе сайта.
- 1Вместо карты виден код. В Тильде это ожидаемо в редакторе HTML-блока; откройте опубликованную страницу. В WordPress проверьте, что использовали Custom HTML.
- 2Код исчез после сохранения в WordPress. При недостаточных правах система удаляет запрещённые теги, включая iframe и script; попросите администратора проверить права вашей учётной записи.
- 3Не работает подключение через API. Сверьте ключ с кабинетом разработчика и проверьте подключение сервиса. Посмотрите, активирован ли доступ и нет ли блокировки. Точную причину ищите по сообщению об ошибке, без замены ключа наугад.
- 4На телефоне вместо карты пустое место. Для JavaScript-кода Конструктора проверьте высоту контейнера: если высота карты задана в процентах, у родительского блока должна быть своя высота. По одному пустому экрану причину установить нельзя.
- 5Метка указывает на другую часть здания. В Конструкторе её можно перетащить; передвиньте к нужному входу, сохраните карту и повторите проверку опубликованной страницы. Конечную точку маршрута после перехода в Карты проверьте отдельно.
Источники: публикация HTML-кода · фильтрация кода WordPress · почему ключ не работает · высота контейнера · перемещение метки.
Проверьте, куда приедет клиент
Представьте автосервис во дворе: адрес здания правильный, но заезд находится с соседней улицы. Поставьте метку у доступного клиенту входа. Затем откройте с телефона ссылку рядом с картой и проверьте конечную точку маршрута. В приложении Яндекс Карт нужную точку можно выбрать на карте: нажмите и удерживайте её, затем нажмите Сюда. Сверьте получившийся путь с реальным подъездом к зданию.
Рядом с картой напишите адрес обычным текстом. Добавьте описание входа с ориентиром и сделайте телефон кликабельным, чтобы человек мог позвонить, если карта не открылась или дорога на месте оказалась непонятной.
Проведите пальцем по странице через область карты: посетитель должен суметь продолжить прокрутку. Проверьте также, не выходит ли блок за край экрана; остальные проверки собраны в статье о мобильной версии сайта.
Пришлите страницу контактов в Telegram: бесплатно посмотрим вашу карту и переход к маршруту. Подскажем, где нужна более понятная подпись о входе. Написать в Telegram ›
Источник действий в приложении: построение маршрута в мобильных Яндекс Картах. Остальное в разделе: рекомендации для проверки вашей страницы.
Не загружайте карту раньше нужного содержимого
Тяжёлая карта на первом экране может замедлить загрузку страницы: сторонняя вставка запрашивает дополнительные ресурсы. Если посетителю сначала нужны описание услуги и контакты, перенесите карту ниже и обсудите с разработчиком загрузку по мере приближения к ней.
Для iframe вне первого экрана браузеры поддерживают отложенную загрузку через loading=lazy. Эффект проверяйте на своей странице до и после изменения; порядок замера есть в статье о скорости сайта и PageSpeed.
Источники: рекомендации web.dev по сторонним вставкам.
Карта на сайте не заменяет карточку в Яндекс Бизнесе
Яндекс Бизнес используют для профиля компании, который можно найти на Картах. Встроенная схема проезда помогает посетителю вашего сайта; создание собственной метки в Конструкторе не стоит принимать за оформление карточки организации.
Проверьте оба места отдельно: на сайте клиенту нужен понятный путь до входа, в карточке нужны верные сведения о компании. Связь карточки с сайтом разобрана в статье как добавить сайт в Яндекс Бизнес.
Источники: добавление компании в Яндекс Бизнес · собственные объекты в Конструкторе.
Проверка пути клиента
Рекомендации для проверки вашей страницы.
Техосмотр сайта
Пять проверок, которые вы делаете сами, без программиста. Каждая про деньги: потерянную заявку, штраф или сайт, который однажды утром не открылся. Непонятные слова объяснены в словарике на каждом листе, галочки ставятся прямо в файле.
- 1Чей у вас домен
- 2Есть ли у вас ключи от сайта
- 3Форма заявки и персональные данные
- 4Доходит ли заявка до человека
- 5Видит ли ваш сайт Яндекс
Частые вопросы
Можно ли добавить Яндекс карту на сайт бесплатно?
Сам Конструктор карт Яндекса бесплатный. У JavaScript API бесплатное использование зависит от условий Яндекса; условия вашей платформы и плагина проверяйте отдельно.
Всегда ли нужен API-ключ?
Нет, базовый JavaScript-код Конструктора допускает работу без ключа, но без поиска и кнопок маршрутов. Панорамы тоже недоступны. Для самостоятельного JavaScript API и штатного блока Яндекс Карт в Тильде ключ нужен.
Куда вставлять карту в WordPress?
Используйте блок Custom HTML, если ваша учётная запись может сохранять iframe. Без разрешения unfiltered_html (сохранять HTML без фильтрации) WordPress удаляет запрещённые теги при сохранении. Если код исчезает, попросите администратора проверить права учётной записи.
Почему карта пустая только на телефоне?
По этому признаку причину не установить. Откройте опубликованную страницу и проверьте блок карты; для JavaScript-кода Конструктора отдельно проверьте, задана ли высота родительского блока при процентной высоте карты.
Достаточно поставить метку, чтобы компания появилась на Яндекс Картах?
Собственная метка в Конструкторе и профиль компании в Яндекс Бизнесе решают разные задачи. Для карточки организации используйте Яндекс Бизнес, а карту на сайте проверяйте как схему проезда для посетителя.
Словарик
- Конструктор карт
- Инструмент Яндекса для создания карты со своими метками и получения кода для сайта.
- iframe
- HTML-элемент, который показывает встроенную страницу, например карту, внутри вашей страницы.
- API-ключ
- Идентификатор для подключения к сервису API. Он отличается от кода карты, полученного в Конструкторе.
- Метка
- Объект на карте, который указывает нужную точку и может содержать подпись с описанием.
Ещё по теме
Делаем сайты, которые проходят техосмотр
Сайты мы тоже делаем сами: лендинг, визитку, каталог, интернет-магазин. Сдаём их по тому же регламенту техосмотра, по которому написан этот справочник.
- 1Сайта ещё нет. Соберём с нуля и в день сдачи передадим вам домен, доступы и документы.
- 2Сайт есть, но устарел или сделан криво. Переделаем и сохраним адреса страниц, которые уже знает поиск.
- 3Сайт работает, а заявок мало. Найдём, где они теряются, и доработаем.
Напишите в Telegram @vbiz_k, расскажите, что есть сейчас. Разговор бесплатный, платной бывает только сама работа.
Нашли проблему в своём сайте?
Пришлите ссылку, скажу, что чинить первым. Любой разговор бесплатный, платной бывает только сама работа.
Написать в Telegram