Как подключить карту Google

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

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

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

Нажмите «Create Account»

Укажите название аккаунта и страну

Заполните адрес и данные банковской карты

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

Откройте список проектов

Нажмите кнопку «New project»

Задайте имя проекта и нажмите «Create»

При создании нового проекта появляется такое окно. Включите галочки и нажмите «Go to google maps platform»

После создания ключа API необходимо настроить ограничения для него. В поле «Select restriction type» выберите тип ограничения «HTTP referrers (web sites)»

Добавьте ссылку на сайт, где должна выводиться карта и нажмите «Restrict key»

Во вкладке Credentials напротив ключа нажмите на «...» (три точки) и выберите «Edit API key»

Добавьте ссылку https://tilda.cc/*, чтобы карта работала и в Редакторе Тильды. Нажмите «Save»

Если не добавить ссылку, то в Редакторе будет отображена ошибка.

Во вкладке Credentials нажмите «Show key»

Скопируйте ключ

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

Укажите ключ и нажмите «Сохранить»

Опубликуйте страницу

Готово!

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

Если карта не работает

Если вы точно следовали инструкции, карта будет работать корректно. Поэтому если карта не работает — попробуйте еще раз. Если все равно не работает, перейдите в Панель управления API https://console.cloud.google.com/apis/library/maps-backend.googleapis.com
и убедитесь, что Google Maps JavaScript API у вас активирован — в окне будет зеленая галочка рядом с текстом API Enabled. Если галочки нет, то нажмите на кнопку «Enable».

Пример, как выглядит панель управления, когда Google Maps JavaScript API не активирован

Пример, когда Google Maps JavaScript API активирован

Если среди активированных API (Enabled APIs)
https://console.cloud.google.com/google/maps-apis/api-list нет Google Maps JavaScript API, то выберите Google Maps JavaScript API из списка ниже, кликните на него и нажмите «Enable».

Проверьте также привязан ли Billing account к вашему проекту:
https://console.cloud.google.com/billing/projects

Как поменять стиль карты

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

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

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

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

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

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

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