Яндекс Карта в Зеро блоке на Тильде

В этой короткой инструкции, я расскажу, как подключить Яндекс Карты в Зеро блоке

Обязательно, дочитайте до конца, чтобы получить две плюшки:

Вы поймете, как сделать это с нормальной адаптацией под все устройства легко
Для владельцев интернет-магазинов, покажу, как сделать выделенную область на Яндекс.Картах, например, для бесплатной доставки

Еще больше интересных материалов в телеграм-канале

Перейти

Содержание

Для того, чтобы сделать нам Яндекс Карты в Zero блоке, нам понадобится бесплатный сервис «Конструктор карт Яндекс»

Если у вас нет аккаунта в Яндексе, то регистрируемся, для доступа к функционалу

Создаем карту

Слева будут поля с Названием и Описанием. Надо дать название нашей карте, которую будем создавать Это название только для нас, чтобы найти нужную карту, когда у нас будет их несколько.
После того, как дали название, можете дать описание (это уже не обязательно)
Вбиваем в окно «Адрес или объект», нужный вам адрес
По подсказкам Яндекса выбираете то, что вам нужно на Яндекс.Карте
Когда появится метка на карте, можете настроить ее внешний вид (выбрать цвет, иконку), название точки, ее описание при клике. Или, если ошиблись адресом, ее удалить
После того, как все Готово, жмете на «Сохранить и продолжить»
Первая часть инструкций закончена. Далее я покажу, куда надо нажать, чтобы карта автоматом подстраивалась под ваши разрешения

Автоматическая адаптация карты

На экране выбора масштаба карты и ее размера, нажимаете на кнопку: «Растянуть по ширине»
Вам нужно только выставить нужную высоту карты и нужный вам масштаб
Нажимаем: Получить код карты
Копируем JavaScript код и идем в Тильду в Zero блок
В Зеро блоке, вверху нажимая на плюс, добавляем html
Далее, для корректного отображения карты на странице, вам нужно только регулировать ширину самого html элемента, на всех размерах экрана в Zero-block
Готово! Ваша карта на сайте будет смотреться как надо!

Добавление карты с выбранным размером

Если по какой-то причине, вам метод, описанный ваше не подходит, то на этапе, где мы нажимали на кнопку Растянуть по ширине, убираете галочку, в этом пункте и выставляете нужные размеры карты и масштаба

Далее, копируете код, добавляете html компонент в Zero и тут уже вы регулировать размеры карты не сможете. У нее будут размеры, которые вы задали в конструкторе карт Яндекса

Выбор нужной области на карте

Если хотите, добавить выделенную область на карте, например, зона бесплатной доставки, для этого вам нужно:
1. Нажать на Линии (см. скрин)
2. Выставляя точки, создаем произвольную фигуру
3. Как обвели то, что нужно, нажимайте Завершить
4. Далее, те же действия, что описаны выше в разделе Автоматической адаптации карты

А также, я записал для вас видео, где я создаю карту и добавляю ее на страницу Зеро блока