Как добавить карту Яндекса на сайт в Tilda

Карта на странице контактов помогает посетителю понять, где вы находитесь и как доехать. Чтобы добавить карту Яндекса на сайт в Тильде, выберите стандартный блок, подключите ключ API и настройте ограничения доменов для сайта и редактора. После публикации проверьте карту в браузере и на телефоне.

Ключ API виден в коде страницы, поэтому ограничение по домену — обязательная часть настройки. Без него чужой сайт может использовать ваш ключ.

Подготовьте ключ и условия использования

Ключ создаётся в кабинете разработчика Яндекса. В справке Тильды описано, как это сделать для карт: выбрать пункт JavaScript API, заполнить короткую анкету и открыть настройки ключа на вкладке «Активные» (Добавление ключа для карт Яндекса^[2]).

Условия и лимиты запросов проверяйте в кабинете Яндекса: справка Тильды упоминает ограничение бесплатного тарифа и советует покупать тариф при росте запросов (Добавление ключа для карт Яндекса^[2]). Точные цены и текущие лимиты зависят от тарифа, поэтому сверяйтесь с актуальной страницей тарифов в кабинете.

Страну налогового резидента выбирают на первом шаге, и изменить её для аккаунта нельзя (Добавление ключа для карт Яндекса^[2]). Это решение принимается один раз, до подключения.

В справке Тильды описан бесплатный сценарий подключения JavaScript API, но у него есть ограничения (Добавление ключа для карт Яндекса^[2]). Перед публикацией проверьте в кабинете Яндекса, подходит ли этот сценарий вашему сайту и ожидаемой нагрузке.

Добавьте ключ и доменные ограничения

В настройках ключа есть поле «Ограничение по HTTP Referrer». В него вписывают домен, на котором будет отображаться карта, и добавляют домен редактора Тильды, чтобы карта работала в редакторе (Добавление ключа для карт Яндекса^[2]). В одной версии справки указан домен tilda.cc, в другой — tilda.ru; сверьте актуальный адрес редактора в текущей версии справки.

Дальше значение ключа копируют и вставляют в Настройках сайта → Еще → Ключи от API карт, в поле Yandex Maps API Key. После сохранения страницы переопубликовывают, и карта должна заработать во всех блоках, использующих данные Яндекса (Добавление ключа для карт Яндекса^[2]).

Порядок такой: домены в кабинете Яндекса → ключ в настройках сайта → переопубликация. Если пропустить переопубликацию, изменения не появятся на сайте.

Настройте блок и метку

Стандартный блок берётся из библиотеки: раздел «Контакты», блоки CN401, CN402, CN402A, CN403 или T143 (^[1]). В контенте блока откройте «Карты и метки», выберите источник Yandex карты и укажите ключ MAPS API (^[1]).

Поле Zoom задаёт масштаб от 0 до 19; по умолчанию стоит 14 (^[1]). Для одной метки начните со значения 14 и после публикации подберите масштаб, при котором посетителю понятны точка и окружающие ориентиры.

В «Маркерах для карты» добавляют координаты: широту и долготу через запятую (^[1]). У метки есть «Заголовок» — он показывается как подсказка при наведении и во всплывающей подсказке при клике (^[1]). Для одной точки поведение маркера можно оставить по умолчанию.

Если на странице есть форма, ссылки и другие элементы доверия, их стоит проверить отдельно: полезные советы собраны в материале про FAQ для сайта с нейросетью, а мелкие детали оформления — в заметке о том, как изменить favicon в Tilda.

Учебный пример и проверка карты

Учебный пример

Исходные условия: учебный сайт example.com, одна метка «Место встречи», координаты 55.751244, 37.618423 как условный выбранный ориентир. Это не адрес реального клиента. Ключ используется свой, его значение в примере не публикуется.

Источник карты	Домен	Координаты	Подпись	Ожидаемая проверка
Yandex карты	example.com	55.751244, 37.618423	Место встречи	На опубликованной странице видна метка с подписью
Yandex карты	tilda.ru (редактор)	55.751244, 37.618423	Место встречи	Карта отображается в редакторе без ошибки ключа
Yandex карты	чужой домен	55.751244, 37.618423	Место встречи	Карта не загружается: домен не в ограничениях

Заполненный результат: ключ создан, в «Ограничение по HTTP Referrer» внесены example.com и домен редактора, ключ вставлен в Настройках сайта → Еще → Ключи от API карт. В блоке CN401 выбран источник Yandex карты, Zoom — 14, в маркере указаны координаты и заголовок «Место встречи». Страница переопубликована.

Проверка на опубликованном сайте:

Откройте example.com в браузере без входа в аккаунт Тильды. Карта должна загрузиться, метка — стоять в указанной точке, подпись — появляться при наведении и клике.
Откройте страницу на телефоне. Метка читается, карту можно двигать и масштабировать пальцем.
Проверьте чужой домен: карта на нём не должна загрузиться. Это подтверждает, что ограничение работает.
Если карта не появилась, проверьте домены в ключе, значение ключа в настройках сайта и переопубликуйте страницу.

Метка остаётся видимой на мобильном экране, а управление картой не перекрывает другие элементы страницы. Эти два свойства и есть критерий готовности.

Ограничения: ограничения доменов нужны, но они не скрывают ключ от браузера; ключ виден в коде страницы. Поэтому чужой домен блокируется именно ограничением, а не секретностью ключа.