Откройте «Библиотеку блоков», выберите раздел «Контакты» и выберите из списка любой из таких блоков, как: CN401, CN402, CN402A, CN403 или T143.

Нажмите на кнопку «Контент». Найдите в контенте блока пункт «Карты и метки» и нажмите на него. Далее, выберите «Источник карт». По умолчанию доступно два источника: Google карты и Yandex карты.

В поле «Ключ для MAPS API» укажите ключ, который требуется создать предварительно в сервисах Google и Yandex. В Zoom необходимо указать масштаб, при котором будет отображаться карта. В «Маркерах для карты» необходимо добавить координаты точки: ширину и долготу, через запятую.

В поле «Заголовок» укажите название компании / филиала / или отправную точку. Добавьте ширину и долготу в поле «Координаты». Сделать это можно двумя способами — скопировать данные из открытого источника или указать сразу на карте.

Дополнительно для каждого маркера можно задать поведение: показывать подсказку по клику, показывать подсказку по умолчанию (по наведению) и скрыть маркер.

Если вы хотите изменить внешний вид маркера — выберите в поле Внешний вид маркера варианты: изображение или цветной маркер. При выборе изображения, загрузите любую картинку. При выборе цветного маркера — задайте необходимый цвет маркера.

Чтобы построить маршрут на карте, нажмите на «Настройки». В списке настроек блока выберите пункт «Настройки пути». Поставьте галочку в пункте «Соединить маркеры».

Также вы можете кастомизировать путь — изменить размер (толщину) и цвет линии.

Для подключения на свой сайт карты от Яндекс (обычной карты или карты для доставки) нужно получить специальный ключ. Рассмотрим в статье, как это сделать.

Перейдите в кабинет разработчика Яндекса и нажмите на кнопку «Подключить API».

Выберите пункт «Javascript API и HTTP Геокодер».

Заполните краткую анкету от Яндекса.

Откройте настройки ключа по кнопке «Изменить».

В поле «Ограничение по HTTP Referrer» впишите доменное имя, на котором будет отображаться карта. Добавьте на второй строке домен «tilda.cc», чтобы карта отображалась в Редакторе Тильды. Сохраните изменения.

Ключ получен. Значение ключа будет указано под названием ключа в списке. Значение ключа нужно скопировать.

Вставьте значение ключа в Настройках сайта → Еще → Ключи от API карт.

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

Для подключения на сайте карты Google нужно получить ключ для JavaScript API и указать его в настройках блока с картой, а на стороне Google привязать платежную карту.

Чтобы начать работу в облачной консоли Google, необходимо создать платежный аккаунт, если ранее он не был создан, и привязать банковскую карту. Для этого перейдите в раздел Billing:
https://console.cloud.google.com/billing

Перейдите в раздел Overview и создайте новый проект: https://console.cloud.google.com/google/maps-apis/overview

Перейдите в Тильду, добавьте блок с картой (например, Т143, категория «Другое»), откройте меню «Контент», укажите полученный ключ в поле Google Map API Key, координаты адреса, сохраните и опубликуйте страницу.

Если вы точно следовали инструкции, карта будет работать корректно. Поэтому если карта не работает — попробуйте еще раз. Если все равно не работает, перейдите в Панель управления API
и убедитесь, что Google Maps JavaScript API у вас активирован — в окне будет зеленая галочка рядом с текстом API Enabled. Если галочки нет, то нажмите на кнопку «Enable».

Если среди активированных API (Enabled APIs) нет Google Maps JavaScript API, то выберите Google Maps JavaScript API из списка ниже, кликните на него и нажмите «Enable».

Проверьте также, привязан ли Billing account к вашему проекту по ссылке.

На Тильде есть три настройки стиля карты — обычная, черно-белая светлая и черно-белая тёмная. Эти стили можно поменять в настройках блока с картой → Стиль Google-карты.

Если этих стилей не хватает, то можно воспользоваться сервисом Snazzymaps и вставить карту самостоятельно.

Для создания карты нужно сначала зарегистрироваться на сайте.

После регистрации нужно перейти по ссылке Build a Map в верхнем меню сайта.

На открывшейся странице нужно прописать название карты и вставить ключ Google Maps API, который можно получить по этой ссылке.

После сохранения нужно выбрать настройки карты с помощью четырех секций. В первой секции можно выбрать стиль карты, нажмите на кнопку Choose a Snazzy Maps style.

После выбора стиля карты и дополнительных настроек в секциях (добавление маркеров, настройка языка и размера) нажмите на кнопку View Code, чтобы получить код карты.

Скопируйте код карты

Вернитесь в Тильду и вставьте код в HTML-блок T123 из категории Другое.

После этого карта со сторонним стилем будет добавлена на страницу.