Как добавить на сайт виджет Google Maps

В конструкторе сайтов SendPulse вы можете добавить виджет с картой, чтобы пользователи могли найти адрес вашего офиса, шоурума, спортивного клуба или любого другого заведения с помощью Google Maps.

В статье рассмотрим, что требуется для добавления на страницу виджета Google Maps и как настроить его отображение.

Получение ключа Google Maps API

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

Подготовка к подключению

Вам потребуется использовать аккаунт Google — ваш личный или связанный рабочий. Зайдите в консоль Google Cloud и создайте новый проект: задайте его название и родительскую организацию (при необходимости).

Нажмите кнопку «Создать» (Create).

Подключите Maps JavaScript API

Перейдите в раздел «API и сервисы» (APIs & services) > «Подключенные API и сервисы» (Enabled APIs & services).

Нажмите «Включить API и сервисы» (Enable APIs & services), чтобы перейти в библиотеку интеграций.

В библиотеке найдите интеграцию с Maps JavaScript API и включите ее.

Подключите платежный аккаунт

Настройка платежного аккаунта — обязательное условие для интеграции с картами.

Перейдите в раздел «Выставление счетов» (Billing) > «Платежные настройки» (Payment settings), чтобы внести нужные данные, а затем в разделе «Выставление счетов» (Billing) > «Платежный метод» (Payment method) привяжите карту для оплаты.

В начале работы платформа Google Clouds начисляет вам стартовые средства для оплаты услуг и дает возможность бесплатно использовать API на время пробного периода, который длится 3 месяца. Когда это время истечет или вы используете все средства стартового баланса, вам нужно будет улучшить тип своего аккаунта.

На платном аккаунте также доступен ежемесячно бесплатный трафик, которого хватит примерно на 28 000 сессий за месяц на страницы сайта с картами.

Все, что свыше, взимается с платежного аккаунта по тарифам, указанным на Platform Pricing & API Costs.

Получите ключ

После включения интеграции с API картами вы получите уникальный ключ для доступа в проекте. Вы можете скопировать его сразу или позже в разделе «Учетные данные» (Credentials).

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

Также рекомендуем позаботиться о безопасности использования вашего API ключа и ограничить прием запросов только с ваших сайтов: для этого выберите пункт «HTTP-рефереры (сайты)» и укажите URL страниц, на которых планируете разместить виджет карт.

Добавление виджета на страницу

Выберите виджет в конструкторе

Откройте страницу сайта в конструкторе и перейдите к нужному блоку, например, «Контакты». Нажмите кнопку «Добавить виджет» и выберите модуль «Карта».

Укажите свой API ключ в форме настройки виджета и нажмите «Сохранить».

Позже при необходимости вы сможете заменить ключ, нажав на кнопку «Редактировать».

Добавьте точки на карту

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

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

Каждый следующий адрес добавляется кнопкой «Добавить адрес».

Настройте внешний вид

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

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

Обновлено: 12.01.2023

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

tilda help center

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

Скопируйте код карты

Вернитесь в Тильду и вставьте код в HTML-блок T123 из категории Другое.

После этого карта со сторонним стилем будет добавлена на страницу.

Разделы «Справочного центра»:

Tilda Education

Видеоуроки

Вебинары

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на [email protected]

Для бухгалтерии

Получить закрывающие документы или подтверждение платежа — напишите на [email protected]

Карты Google — добавьте пользовательскую карту на сайты Google в несколько кликов (2023)

Продемонстрируйте неограниченное количество местоположений, укажите точки и подробную информацию о них на адаптивной карте, чтобы оставаться на связи с пользователями

Скриншоты

Описание

Google Map от Elfsight — это эффективный и полностью настраиваемый инструмент, который значительно упрощает поиск местоположений для ваших пользователей. Эффективный в привлечении реальных клиентов, быстрая интеграция и настройка интерфейса делают его, пожалуй, лучшей покупкой для каждого веб-сайта Google.

С помощью Google Maps добивайтесь устойчивого развития бизнеса и повышения продаж

Это лишь некоторые из мощных функций виджета:

• Станьте ближе к пользователям
• Поиск и получение местных клиентов
• Потратьте время на создание карт

Проверить работу виджета можно с помощью демо-версии

Как встроить Карту Google в мои Сайты Google?

Просто выполните приведенные ниже рекомендации, чтобы начать использовать плагин.

1. Воспользуйтесь нашим бесплатным редактором и начните формировать свой собственный плагин.
   Выберите предпочтительный интерфейс и функциональные особенности виджета и сохраните изменения.
2. Скопируйте персональный код, указанный в специальной форме в Elfsight Apps.
   После завершения настройки вашего плагина скопируйте индивидуальный код в появившемся всплывающем окне и сохраните его на будущее.
3. Введите при использовании карты на Сайтах Google.
   Вставьте сохраненный ранее код на свою страницу и примените изменения.
4. Готово! Настройка успешно завершена.
   Зайдите на свою страницу, чтобы понаблюдать за работой инструмента.

Из-за особенностей работы Google Sites виджет может отличаться от онлайн-демонстрации. Приносим извинения за доставленные неудобства.

Если у вас возникнут какие-либо проблемы, без колебаний обращайтесь в нашу службу поддержки клиентов. Наши специалисты будут рады решить все трудности, которые могут возникнуть у вас с виджетом.

Как добавить Карты Google на мой веб-сайт Google Sites без навыков программирования?

Elfsight предлагает SaaS-решение, которое позволяет вам самостоятельно создавать виджет Google Maps. Посмотрите, насколько это просто: работайте прямо в онлайн-редакторе, чтобы создать виджет Google Maps, который вы хотели бы видеть на своем веб-сайте Google Sites. Выберите один из готовых шаблонов и настройте параметры Google Maps, добавьте свой контент, измените макет и цвета без каких-либо навыков программирования. Сохраните Карты Google и скопируйте их установочный код, который вы можете легко добавить на свой веб-сайт Google Sites, не покупая платную версию. С помощью нашего интуитивно понятного редактора любой пользователь Интернета может создать виджет Google Maps онлайн и легко встроить его на свой веб-сайт Google Sites. Для доступа к услуге не нужно платить или вводить данные своей карты. Если у вас возникнут какие-либо проблемы на любом этапе, пожалуйста, не стесняйтесь обращаться в нашу службу технической поддержки.

Цены

14-дневная гарантия возврата денег. Без риска, вы можете отменить в любое время.

Приложения Elfsight

Кроссплатформенное ПО

от $0 / месяц

начать с бесплатного плана

Неограниченное количество сайтов

Бесплатная поддержка клиентов

Бесплатная помощь по установке

Специальное предложение для нескольких приложений

Гибкая конструкция

Добавить на сайт

Дизайны веб-сайтов — Сайты Google

Невероятно красивый

Примеры дизайнов веб-сайтов, которые мы создали для Сайтов Google.

Если вам нужен веб-дизайн для вашего веб-сайта на Сайтах Google, обратитесь к нашим службам веб-дизайна Сайтов Google ниже:

Горячие линии отдела продаж

США ✆  +1 (302) 672 3007

Великобритания ✆  +44 (207) 871 5021 9 0061

Создано с использованием новых Google Sites

Google Sites Дизайн для вашего веб-сайта

В Steegle.com мы любим разрабатывать и проектировать ваши инновационные и адаптивные профессиональные веб-сайты с помощью Google Sites (конструктор веб-сайтов Google), обновлять существующие веб-сайты и переносить традиционные веб-сайты в Google Sites. Если вам нужна уникальная тема для новых сайтов Google, посмотрите наши примеры ниже.

Непревзойденная надежность веб-сайта с Google Sites

Сайты Google используют преимущества работы в облаке, надежность Google (доступность в течение 99,9% времени) и отсутствие платы за хостинг. Если вместо этого вас интересует интранет, ознакомьтесь с нашими дизайнами интрасети Google Sites.

Нужны услуги веб-дизайна Google Sites?

Если вы хотите разработать определенную тему для своего сайта Google, сообщите об этом опытным веб-дизайнерам Google Sites, и мы сможем создать ваш сайт.

Связаться с дизайнерами веб-сайтов Google Sites

Веб-сайт Aim for A — новые Сайты Google

• Новый дизайн Сайтов Google для клиента

• Переход с классических Сайтов Google на новые

• Адаптивные информационные страницы

• Полноразмерные фоновые изображения

• Сайт с другими информативными страницами

• Интеграция с Google Forms

• Google App s Интеграция скриптов

• Кнопки призыва к действию

• Пользовательская тема с фирменными цветами

• Поддерживается клиентом

Посмотреть цены

Сайт DPI Site Partners — новый Google s

• Новый дизайн Сайтов Google

• Полностью адаптивный для мобильных устройств

• Современный инновационный набор иконок

• Веб-сайт с другими информативными страницами

• Интеграция с Google Forms

• Кнопки призыва к действию

• Пользовательская тема с фирменными цветами

Посмотреть цены

Веб-сайт Water Fountain Guy — новые сайты Google

9 0005

• Новый дизайн Сайтов Google для клиента

• Сайт с другими информативными страницами

• Переход с классических Сайтов Google на новые

• Интеграция с Google Forms 90 003

• Кнопки призыва к действию

• Пользовательская тема с фирменными цветами

• Поддерживается клиентом

Посмотреть цены

Веб-сайт Regulus Partners — новые Google Sites

900 05

• Новый дизайн Google Sites для клиента

• Адаптивный дизайн для мобильных устройств

• Адаптивные информационные страницы

• Современный дизайн и градиент 900 03

• Интерактивная карта

• Пользовательская тема с фирменными цветами

Посмотреть цены

Владение блокчейном — новые Сайты Google

• Новый дизайн Сайтов Google

901 31

Gif-изображение в заголовке

• Полностью адаптивный дизайн для мобильных устройств

• Полноразмерные фоновые изображения

• Обложка

• 901 32 Интеграция с Google Forms

• Кнопки призыва к действию

Посмотреть цены

Веб-сайт Applied Autonomy — новые Сайты Google

• Новый дизайн Сайтов Google для клиента

• Адаптивный In формирующие страницы

• Интеграция инструмента новостей Steegle

• Полноразмерные фоновые изображения

• Сайт с другими информативными страницами

• Интеграция с Google Forms 9 0003

• Кнопки призыва к действию

• Пользовательская тема с фирменными цветами

• Поддерживается клиентом

Посмотреть цены

Создание собственного веб-сайта с помощью Google Sites для создания веб-сайта без знания программирования поможет вам получить красивый веб-сайт. Сайты Google предоставляют шаблоны веб-сайтов, которые вы можете отображать в своем собственном домене, и Steegle может быть вашим веб-разработчиком, чтобы начать создание вашего сайта, после чего вы сможете обновлять свой собственный веб-сайт в будущем.

Веб-сайт DrPete — новые сайты Google

• Новый дизайн Сайтов Google

• Адаптивные информационные страницы

• Полноразмерные фоновые изображения

• Веб-сайт с другими информативными страницами

• Интеграция с Google Forms

• Кнопки призыва к действию

• Пользовательская тема с фирменными цветами

Посмотреть цену 900 03

Веб-сайт Zzapps — новые сайты Google

• Новый дизайн Сайтов Google для клиента

• Полностью адаптивный дизайн для мобильных устройств

• Полноразмерные фоновые изображения

• Веб-сайт с другими информативными страницами

  9 0018

• Интеграция с Google Forms

• Кнопки призыва к действию

Посмотреть цены

Веб-сайт Vlacs — новые сайты Google

• Новый дизайн Сайтов Google для клиента

• Портал веб-сайта колледжа

• Интеграция инструмента Steegle News

• Веб-сайт с другими информативными страницами

• Интеграция с Google Forms

90 131

Кнопки призыва к действию

• Пользовательская тема с фирменными цветами

• Поддерживается клиентом

Посмотреть цены

— новые Google Сайты

• Адаптивный дизайн новых сайтов Google

• Преобразование из Joomla! — Система управления контентом с открытым исходным кодом

• Общедоступный веб-сайт в Интернете

• Образовательный интернет-сайт, используемый в качестве портала для студентов и сотрудников 

• Интеграция с Календарем Google

• 9013 2 Интеграция с Google Диском

• Интеграция с социальными сетями для Twitter

• Интеграция с Google Forms

• Пользовательский логотип сайта, цвет темы и значок

• Поиск по сайту

Посмотреть цены

9 0107 Дом престарелых – новые сайты Google

• Новые сайты Google Адаптивный дизайн

• Вакансии персонала

• Интеграция с Google Фото

9 0131

Интеграция с Google Maps

• PDF-файлы, встроенные с Google Диска

• Пользовательский логотип сайта, цвет темы и значок

• Поиск по сайту

Посмотреть цены

Джордж Уэллс дал Steegle. com 5 звезд. Ознакомьтесь с полным обзором… «Я являюсь председателем благотворительного фонда, который управляет и несет ответственность за Emmaus House a 26…»

Опрос коммунальных служб — новые сайты Google

• Новые сайты Google Адаптивный дизайн

• 90 132 Миграция с классических Google Sites

• Интеграция с Google Maps

• Интеграция со скриптом Google Apps 

• Сетка изображения логотипа клиента, которую клиент легко поддерживает 

• Пользовательский логотип сайта, цвет темы и favicon

• Поиск по сайту

Посмотреть цены

Пит Виола дал Steegle.com 5 звезд. Ознакомьтесь с полным обзором. ..»Я глава небольшого предприятия с 10 сотрудниками на северо-востоке США. Пара…»

Bird of Prey Center – новые Сайты Google

• Адаптивный дизайн новых Сайтов Google

• Перенесено из классических Сайтов Google

• 9013 2 кнопки PayPal для покупки мероприятий, услуг и событий

• Интегрированная лента Facebook для предоставления объявлений

• Интеграция с Google Maps

• Интеграция с информационным бюллетенем MailChimp

• Отзывы клиентов

• Пользовательский логотип сайта, цвет темы и значок

• Поиск по сайту

Посмотреть цены

Гэри Свейнсон дал Steegle. com 5 звезд. Ознакомьтесь с полным обзором…»Steegle были потрясающими. Я совершенно бесполезен, когда дело доходит до технологий, но эта компания разработала…»

Сайты Google упрощают создание веб-сайтов. В отличие от других систем управления контентом, вам не нужно знать, как кодировать, и вы можете легко поддерживать свой веб-сайт с помощью редактора перетаскивания. Если вы используете Google Workspace для своих учетных записей электронной почты и вам нужен веб-сайт, то создание веб-сайтов с помощью веб-конструктора Google уже доступно вам без дополнительных затрат на создание. Сайты Google — один из лучших конструкторов сайтов для малого бизнеса.

Консультации по ИТ — новые Сайты Google

• Адаптивный дизайн новых Сайтов Google

• Перенесено из классических Сайтов Google

• Персонал Интранет

• Форма бронирования отпуска

• Страница команды

• CRM-интеграция

Посмотреть цены

Migrasoothe — новые сайты Google

• новые сайты Google Адаптивный дизайн

• Полностью адаптивные сайты Google

• Видео с YouTube Встроить

• Страница блога со ссылкой на интернет-магазин shopify

• Пользовательский сайт логотип, цвет темы и значок

Посмотреть цены

Google Sites News Gadget

News Gadget Ценообразование Запрос

Church — new Googles

• Новый дизайн Сайтов Google

• Полностью адаптированный под мобильные устройства дизайн

• Миграция с классических Сайтов Google

• Интеграция с Google Forms

• Пользовательский логотип сайта и цвет темы

9 0131

Поиск по сайту

Посмотреть цены

Системы управления — новые сайты Google

Посмотреть цены

Некоммерческие/благотворительные организации — новые сайты Google

900 05

• Новые сайты Google Адаптивный дизайн

• Преобразование из классических Сайтов Google

• Подписка на рассылку новостей

• Интеграция с YouTube

• Регистрация в качестве участника

  9 0018

• Пользовательский логотип сайта, цвет темы и значок

• Сотни статей, доступных для поиска через поиск по сайту

Мгновенные организационные диаграммы и каталог для веб-сайтов звезды. Ознакомьтесь с полным обзором…»Я являюсь исполнительным директором небольшой некоммерческой организации. Сначала я обратился на Steegle.com за h …»

Веб-сайт Bija — новые Сайты Google

• Новый дизайн Сайтов Google

• Адаптивные информационные страницы

• Полная ширина фоновые изображения

• Веб-сайт с другими информативными страницами

• Интеграция с Google Forms

• Кнопки призыва к действию

• Пользовательская тема с фирменными цветами 9000 3

Посмотреть цены

Opticians — новые Сайты Google

• Новый дизайн Сайтов Google

• Полностью адаптированный для мобильных устройств дизайн

• Полноразмерные фоновые изображения

• Преобразование классических Сайтов Google в новые

• Интеграция с Google Forms

• Современный яркий дизайн

• Интеграция с Google Maps

9002 3

Посмотреть цены

Тим Харпер дал Steegle. com 5 звезд. Ознакомьтесь с полным обзором…»Неизменно высокий уровень поддержки, с понятными советами и инструкциями в случае необходимости…»

Property Surveyors — новые Сайты Google

• Новый дизайн Сайтов Google

• Дизайн, полностью адаптированный для мобильных устройств

• Перенесено из классических Сайтов Google

• Кнопки вызова по клику

• Интеграция с Google Диском

• Пользовательский логотип сайта, цвет темы и фавикон

• Интеграция с социальными сетями 9 0003

• Поиск по сайту

Посмотреть цены

Колледж/Школа – новые Сайты Google

• Новый дизайн Сайтов Google

• Дизайн, полностью адаптированный для мобильных устройств 90 003

• Полноразмерные фоновые изображения

• Интеграция с Google Forms

• Современный, смелый дизайн

• Страница профиля сотрудника

  9001 8

• Интеграция с Google Диском

Мгновенные организационные диаграммы и каталог для веб-сайтов

Интранет агента по недвижимости — новые сайты Google

• Адаптивный дизайн

• Частный интранет только для сотрудников с Google Workspace

• Интеграция с социальными сетями

• Корпоративное владение файлами на Google Диске

• Резервное копирование из облака в облако

• Поддержка Google Sites и обслуживание включено в пакет

Посмотреть цены

Создание собственного веб-сайта с помощью Google Sites для создания веб-сайта без знания программирования поможет вам получить красивый веб-сайт.