Как добавить карту на сайт Тильда

Для размещения простой карты на странице удобно использовать блок Т143. Он находится в категории «Другое».

После того как вы добавите его на страницу, нажмите кнопку «Контент» — так вы перейдёте в настройки карты. Здесь вы сможете выбрать, какую карту использовать — по умолчанию стоит Google, но можно переключиться на Яндекс.

Чтобы карта заработала, нужно ввести специальный ключ (API-ключ). Это своего рода цифровой «пропуск», который позволяет загрузить карту именно на вашем сайте. Ключ можно получить в Google Cloud или через Яндекс, если вы используете их карты.

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

Если вы хотите разместить не только карту, но и контактную информацию (телефон, email, соцсети) в одном блоке, то лучше подойдут готовые решения из категории «Контакты» — это блоки с номерами CN401 по CN403. Они уже включают карту и все нужные поля.

Работают они похоже: вы также выбираете источник карты, вставляете API-ключ, настраиваете масштаб и указываете нужный адрес. Отличие в том, что всё это совмещается с текстовыми контактами и выглядит аккуратно и профессионально.

Для новичка это может показаться сложным, но всё не так страшно.

1. Перейдите в облачную консоль Google, зарегистрируйтесь и создайте новый проект (это как папка, в которой будет храниться ваш ключ).
2. Включите нужный API — он называется Maps JavaScript API.
3. Затем зайдите в раздел «Учетные данные» и нажмите «Создать ключ».
4. Установите ограничения — укажите, что ваш ключ будет использоваться только на вашем сайте (впишите его адрес).
5. Привяжите платёжный аккаунт — без этого ключ не активируется. Это бесплатно, если вы не используете карту на огромном трафике.
6. После активации вы получите ключ — его нужно скопировать и вставить в настройки карты в Тильде.

Если карта не работает, пройдите путь ее подключения еще раз, проверив каждое действие. В случае, если вы все сделали правильно, но результат остается прежним — вернитесь в Панель управления API и убедитесь в том, что Google Maps JavaScript API активирован.

Вот основные причины:

• вы не вставили ключ или вставили его с ошибкой;
• API не был активирован в Google Console;
• нет привязанного платёжного аккаунта;
• в настройках ключа не указано, что он может работать с вашим сайтом.

Проверьте всё по шагам. Если что-то непонятно — в Тильде есть подсказки прямо внутри блока.

Да, в блоке Т143 можно выбрать один из трёх вариантов оформления:

• стандартная цветная карта;
• чёрно-белая в светлых тонах — выглядит минималистично;
• тёмная чёрно-белая — подойдёт для тёмных сайтов.

Это делается в разделе «Контент» — кнопка называется «Стиль Google-карты».

Добавление карты на сайт — это не сложно. Tilda уже подготовила для вас все нужные инструменты, и вам остаётся просто вставить ключ, указать адрес и сохранить страницу. Даже если вы никогда раньше не работали с такими настройками — не бойтесь. Следуйте пошагово, и всё получится.

Если нужно, вы всегда можете начать с самого простого — добавить карту без маршрута и одного маркера. А когда почувствуете уверенность, сможете настроить стиль, маршрут и другие детали.