[Урок 11] Подключаем навигационную карту к сайту
Всем привет! Для грамотного составления блока контактов нам нужно будет подключить карты с расположением нашего заведения (или другой нужной точки).
Тильда позволяет подключать и кастомизировать карты от Google и Yandex. Этим мы и займёмся в данном уроке. Открываем tilda и начинаем!
Ищем нужный блок
Открываем раздел со всеми блоками, переходим в раздел "Другое" (в самом конце странички) и ищем блок T143 - Карты Google или Yandex. Добавляем его на страницу.
Основные настройки блока
Сразу открываем настройки блока и видим уже похожие параметры. Пройдёмся по ним ещё раз :
Ширина - ширина карты, от 100% до растягивании по колонкам. Я оставлю 100%.
Высота - высота самой карты, здесь вы можете установить высоту карты в пикселях. Я поставлю 450px.
Стиль гугл карты - шаблонный стиль карты, который просто поменяет её вид. Можете попробовать каждый, устанавливайте тот, который вам больше понравится.
Язык интерфейса оставляем неизменным, а остальные параметры вам и так знакомы. Нажимаем "Сохранить и закрыть" и переходим к настройкам контента.
Кстати, вот так выглядит карта на странице в данный момент :
Настройки контента - подключение карты
Источники карт : Yandex и Google, соответственно. Теперь более детально.
Подключаем Google карты
1) Переходим сюда - https://console.cloud.google.com/projectselector/google/maps-apis/overview
2) Нажимаем "Создать проект"
3) Вводим данные в соответсвующие поля и создаём проект
4) На главной странице у вас появится несколько вариантов карт. Нам нужен Maps Javascript API - переходим в него
5) Нажимаем на кнопку "Включить"
6) Переходим во вкладку "Учётные данные" и нажимаем на ссылку "Создать"
7) Нажимаем "Создать ключ API"
8) Ключ API создан. Оставляем его здесь и нажимаем "Закрыть". Для корректной работы гугл карт и их аналитики нам понадобится ещё несколько настроек.
9) Нажимаем на редактирование ключа
10) Допустимый тип приложений - выбираем "HTTP источники перехода (веб сайт)".
11) Ограничения для веб сайтов. Нажимаем "Добавить элемент"
12) Вводим адрес нашего сайта. Можно тестовый домен (будет отображен, при нажатии на кнопку "Опубликовать" на тильде)
13) Допустимые API
Ставим "Применить ограничения для ключа". В списке ищем по поиску и выбираем Maps Javascript API.
14) Нажимаем "Сохранить".
15) В разделе "Общая информация" ищем окно "Оплата" и переходим к настройкам.
16) Создаём платёжный аккаунт (денег с вас никто не спишет, не переживайте).
17) Заполняем все нужные данные
18) Нажимаем "Начать бесплатный пробный период"
19) Возвращаемся к нашему API ключу, копируем его и идём на тильду.
20) Вставляем API ключ в поле на тильде
Далее по настройкам :
ZOOM - параметр отвечающий за % приближения карты к точке. Можете поставить любое значение и в будущем посмотреть как это будет выглядеть. Я поставлю 40.
ТОЧКИ НА КАРТЕ - открываем точку, вводим название и описание.
На гугл картах выбираем нужную нам точку и забираем с собой показатели широты и долготы. Вставляем их в соответствующие поля в тильде.
Нажимаем "Сохранить и закрыть" - далее публикуем нашу страницу.
Готово! Гугл карта подключена.
Подключаем Yandex карты
Если вы дочитали до этого момента - вы большой молодец! С Яндекс картами всё будет намного проще. Нам не понадобится API ключ.
1) Выбираем из списка источника карт : Yandex Maps
2) Поле с API key оставляем пустым
3) Переходим к точке на карте и указываем нужные параметры (я оставлю их теми же)
4) Нажимаем сохранить и закрыть, опубликуем наш сайт и вуа-ля - карта работает!
Урок подошёл к концу. Постарался расписать МАКСИМАЛЬНО подробную инструкцию по подключению карт, надеюсь она будет вам полезна.
Какую из карт делать на сайте? Ответ прост - любую, если нет конкретных требований от заказчика. На этом всё, не забывайте читать наш канал и развиваться! Всем успехов)