Агентство
интернет-маркетинга

 
   
  • Услуги
  • Обучение
  • Блоги и кейсы
  • Сервисы

Получайте бесплатные уроки и фишки по интернет-маркетингу

Подпишитесь сейчас

Ваши данные в сохранности
Нет, спасибо!

Tilda: как добавить карту 

24 декабря 2020
Просмотров: 879
Сложность: новичок
11 мин.

Как добавить кнопку на Тильду

Сегодня разберемся, как добавить карту в ваш проект на конструкторе Tilda. Блочный конструктор Tilda не требует знаний программирования, поэтому такой необходимый инструмент для раздела «Контакты», как карта, сможем внести на сайт буквально за пару минут. 

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

Блок «карта» на Тильде

Рис. 1. Блок «карта».

После добавления карты необходимо, чтобы на ней отображалась интересующая вас локация. Для этого нужно зайти в Яндекс.Карты или Гугл карты, Tilda поддерживает оба варианта, в строке поиска необходимо задать интересующий вас адрес, далее нужно нажать иконку «поделиться», и ниже отобразятся широта и долгота.

Широта и долгота в картах на Тильде

Рис. 2. Широта и долгота в картах.

Возвращаемся к проекту. В нашем вновь добавленном блоке выбираем «Контент» в верхнем меню:

Редактирование карты на Тильде

Рис. 3. Редактирование карты.

Начинанием редактировать блок и добавлять необходимый нам адрес, заполняя поля: «заголовок», «текст» и другие. Выбираем источник карт (Гугл или Яндекс карты), переходим в раздел «точка на карте», заполняем поля «заголовок точки», «описание» и переносим координаты с карты (рис. 2). Нажимаем поле в правом верхнем углу окна «сохранить и закрыть». 

Широта и долгота в картах Tilda

Рис. 4. Широта и долгота в картах Tilda. 

С какими проблемами вы можете столкнуться: карта пропала 

Карта добавлена на наш сайт, но через некоторое время карта может перестать отображаться или перестанет быть активной. Чтобы этого избежать, нужно получить API Key для Яндекс карт или Гугл карт.

Получить API Key не так уж и трудно, рассмотрим на примере Яндекса (в Гугле последовательность действий та же). Для этого необходимо войти в Кабинет разработчика и нажать кнопку «Подключить API».

Кабинет разработчика на Тильде

Рис. 5. Кабинет разработчика.

Далее выбираем сервис JavaScript API и HTTP Геокодер.

JavaScript API и HTTP Геокодер

Рис.6. JavaScript API и HTTP Геокодер.

После чего жмем «Продолжить». Заполняем анкету и следуем дальнейшим инструкциям «Кабинета разработчика», и через несколько минут ключ у вас. После того, как вы получили ключ, его необходимо скопировать и вернуться в проект на Tilda, добавить его в поле ключ для Maps API. И не забываем нажать красную кнопку «Сохранить и закрыть».

Поле для ключа API

Рис. 7. Поле для ключа API.

Обращаем ваше внимание, что после сохранения ключа на сайте, нужно некоторое время, чтобы он заработал. 

После этого можно быть уверенным, что карта на сайте будет отображаться корректно и не пропадет со временем. 

Получите коммерческое предложение
по разработке landing page

Аватар

Добавить комментарий (1)

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Получайте бесплатные уроки и фишки по интернет-маркетингу

Похожие статьи:

Наверх