Справочный центр

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

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

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

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

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

Задайте имя проекта (любое) и нажмите «Create»

Выберите из списка «Maps JavaScript API»

Нажмите на кнопку «Enable», чтобы включить Maps JavaScript API

В списке активированных API кликните на «Maps JavaScript API», чтобы создать ключ

Нажмите «Create Credentials» → «API Key»

Нажмите «Restrict key» в поп-ап окне, чтобы обеспечить безопасный доступ

Тип: HTTP referrers (web sites). Ниже добавьте ссылку на ваш домен, где должна выводиться карта и ссылку https://tilda.cc/*, чтобы карта работала и в Редакторе Тильды; API Restriction: Restrict key

Выберите в списке Maps JavaScript API и сохраните изменения.

Перейдите в раздел Billing, чтобы добавить кредитную карту к аккаунту Google. Без платежных данных карта на сайте работать не будет

Если платежный профиль был ранее привязан, то выберите его из списка или создайте новый по кнопке «Link a billing account»

На первом шаге заполните поля формы

На втором шаге подтвердите ваш номер телефона

На последнем шаге заполните адрес, имя и укажите данные кредитной карты в разделе Payment method

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

Перейдите в Тильду, добавьте блок с картой (например, Т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 не активирован

Если среди активированных 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, чтобы получить код карты.