Особенности работы с картами Google и Yandex

Посмотреть это видео на YouTube

Посмотрите видеоурок о том, как добавить карты Google и Яндекс на страницу или прочитайте подробную инструкцию ниже.

С помощью карты на сайте можно указать точное местоположение компании и филиалов, а также выстроить детальный маршрут.
Как добавить карту на страницу
Перейти
Как добавить адрес в маркер на карте
Перейти
Как добавить маршрут на карту
Перейти
Как добавить ключ для карты Яндекс
Перейти
Как добавить ключ для карты Google
Перейти
Как добавить карту на страницу
Откройте «Библиотеку блоков», выберите раздел «Контакты» и выберите из списка любой из таких блоков, как: CN401, CN402, CN402A, CN403 или T143.
Библиотека блоков: категория «Контакты» в боковом меню и блок CN401 «Контакты и карта в две колонки» в списке блоков.
Нажмите на кнопку «Контент». Найдите в контенте блока пункт «Карты и метки» и нажмите на него. Далее, выберите «Источник карт». По умолчанию доступно два источника: Google карты и Yandex карты.
В поле «Ключ для MAPS API» укажите ключ, который требуется создать предварительно в сервисах Google и Yandex. В Zoom необходимо указать масштаб, при котором будет отображаться карта. В «Маркерах для карты» необходимо добавить координаты точки: ширину и долготу, через запятую.
Поле Zoom задает масштаб для карты в диапазоне от 0 до 19, где при 0 отображается вся планета, а при 19 можно рассмотреть улицы и дома. По умолчанию установлено значение 14.

Для карт Google Maps выставляется ближайший подходящий масштаб, если все точки не помещаются при заданном масштабе.
Как добавить адрес в маркер на карте
В поле «Заголовок» укажите название компании / филиала / или отправную точку. Добавьте ширину и долготу в поле «Координаты». Сделать это можно двумя способами — скопировать данные из открытого источника или указать сразу на карте.
Заголовок используется в качестве подсказки при наведении на маркер, а также отображается во всплывающей подсказке при клике.
Что указать в дополнительных настройках «Маркера на карте»
Дополнительно для каждого маркера можно задать поведение: показывать подсказку по клику, показывать подсказку по умолчанию (по наведению) и скрыть маркер.

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

Также вы можете кастомизировать путь — изменить размер (толщину) и цвет линии.
Как добавить ключ для карты Яндекс
Для подключения на свой сайт карты от Яндекс (обычной карты или карты для доставки) нужно получить специальный ключ. Рассмотрим в статье, как это сделать.
Перейдите в кабинет разработчика Яндекса и нажмите на кнопку «Подключить API».
В сервисе «Яндекс Кабинет разработчика»: кнопка «Подключить API» по центру страницы.
Выберите пункт «Javascript API и HTTP Геокодер».
В «Кабинете разработчика» Яндекса: выбор пункта «JavaScript API и HTTP Геокодер» в окне «Подключить API» и кнопка «Продолжить».
Заполните краткую анкету от Яндекса.
В Яндекс.Кабинете разработчика окно «Подключить API» с полями «Телефон», «Название компании», вопросом об условиях использования, полем для ссылки на сайт и кнопкой «Продолжить».
В кабинете разработчика Яндекса: всплывающее окно «Подключить API» со статусом «API интерфейс подключен» и кнопкой «Перейти к API».
Откройте настройки ключа по кнопке «Изменить».
В Кабинете разработчика Яндекса: ссылка «Изменить» в карточке ключа API.
В поле «Ограничение по HTTP Referrer» впишите доменное имя, на котором будет отображаться карта. Добавьте на второй строке домен «tilda.cc», чтобы карта отображалась в Редакторе Тильды. Сохраните изменения.
В Яндекс Кабинете разработчика: поле «Ограничение по HTTP Referer» в окне «Настройки ключа».
Ключ получен. Значение ключа будет указано под названием ключа в списке. Значение ключа нужно скопировать.
В Кабинете разработчика Яндекс: значение ключа API в блоке «Key #1» в разделе «Ключи API».
Вставьте значение ключа в Настройках сайта → Еще → Ключи от API карт.
Настройки сайта, вкладка «Еще»: раздел «Ключи от API карт» с полями «GOOGLE MAPS API KEY» и «YANDEX MAPS API KEY».
Сохраните изменения и переопубликуйте страницы. Карта должна заработать во всех блоках, использующих данные от Яндекса.
Как добавить ключ для карты Google
Для подключения на сайте карты 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 не работает
Если вы точно следовали инструкции, карта будет работать корректно. Поэтому если карта не работает — попробуйте еще раз. Если все равно не работает, перейдите в Панель управления API
и убедитесь, что Google Maps JavaScript API у вас активирован — в окне будет зеленая галочка рядом с текстом API Enabled. Если галочки нет, то нажмите на кнопку «Enable».
Если среди активированных API (Enabled APIs) нет Google Maps JavaScript API, то выберите Google Maps JavaScript API из списка ниже, кликните на него и нажмите «Enable».
Проверьте также, привязан ли Billing account к вашему проекту по ссылке.
В Google Cloud на вкладке «My Projects» ссылка на платежный аккаунт в столбце «Billing account».
Как поменять стиль карты
На Тильде есть три настройки стиля карты — обычная, черно-белая светлая и черно-белая тёмная. Эти стили можно поменять в настройках блока с картой → Стиль Google-карты.
Панель «Настройки» блока с картой Google: выпадающий список «Стиль Google-карты» со значением «ЧБ темная» и предпросмотр темной темы.
Если этих стилей не хватает, то можно воспользоваться сервисом Snazzymaps и вставить карту самостоятельно.

Для создания карты нужно сначала зарегистрироваться на сайте.
На сайте Snazzy Maps: пункт «Register» в выпадающем меню профиля в правом верхнем углу.
После регистрации нужно перейти по ссылке Build a Map в верхнем меню сайта.
На сайте Snazzy Maps: пункт меню «BUILD A MAP» в верхней панели навигации.
На открывшейся странице нужно прописать название карты и вставить ключ Google Maps API, который можно получить по этой ссылке.
В сервисе Snazzy Maps: панель «Save Map» с полями «MAP NAME» и «GOOGLE MAPS API KEY», кнопкой «SAVE» и предпросмотром карты справа.
После сохранения нужно выбрать настройки карты с помощью четырех секций. В первой секции можно выбрать стиль карты, нажмите на кнопку Choose a Snazzy Maps style.
В сервисе Snazzy Maps: кнопка «Choose a Snazzy Maps style» в шаге 1 «STYLE» на панели слева.
После выбора стиля карты и дополнительных настроек в секциях (добавление маркеров, настройка языка и размера) нажмите на кнопку View Code, чтобы получить код карты.
В сервисе Snazzy Maps: кнопка «View Code» на вертикальной панели инструментов.
Скопируйте код карты
В сервисе Snazzy Maps: кнопка «COPY CODE TO CLIPBOARD» в левой панели раздела «View Code».
Вернитесь в Тильду и вставьте код в HTML-блок T123 из категории Другое.
В панели «Контент» HTML-блока: кнопка «Сохранить и закрыть» вверху и добавленный код карты в поле «HTML КОД / КОД ВИДЖЕТА».
После этого карта со сторонним стилем будет добавлена на страницу.
Пример отображения стилизованной карты Google на опубликованной странице сайта.
Made on
Tilda