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

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

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

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

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

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

Скопируйте ID

Для каждого элемента предусмотрен идентификатор (ID), который определяет элемент на странице. C его помощью вы можете применять стили и скрипты, настроить показ попапов и отслеживать события по этому элементу.

Чтобы скопировать ID, нажмите на него. Чтобы отредактировать ID, нажмите на значок карандаша.

Читайте подробнее: ID блока и виджета.

Обновлено: 19.03.2025