Пошаговая инструкция по размещению на сайте карты Google Maps

с помощью Google Maps API Key

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

В июне 2018 года Google запустила новый функционал Google Maps Platform, а c июля 2018 года вступил в силу новый тарифный план Google с оплатой за использование API.

В статье пройдем шаги, необходимые для получения ключа API Google Map по состоянию на август 2018 года, а затем для примера добавим Google Maps на сайт с конструктором Divi.

1. Получить Google Maps API Key — первые шаги

Чтобы получить Google Maps API Key необходимо иметь или создать учетную запись Google. Создать учетную запись можно бесплатно, нажав здесь. Я предполагаю, что у большинства читателей уже есть учетная запись Google, так что переходим к следующему шагу.

Перейди на платформу Google Maps Platform и нажми кнопку «Get Started» в правом верхнем углу сайта.

В появившемся диалоговом окне выбери «Maps» («Карты») и нажми кнопку «Continue» («Продолжить»)

Получить Google Key

Следующий шаг — выбери проект. Если впервые создаешь ключ API — сначала необходимо проект создать.

Получить Google Key

Дай проекту название.
Нажми кнопку «Next» в правом нижнем углу

Далее настрой свою систему оплаты за использоание API.
Дождитесь приглашения на включение оплаты для проекта и выбери «Создать платежный аккаунт»

Получить Google Key

Выбери страну, условия использования и жми «Согласиться и продолжить»

Получить Google Key

Далее нужно будет настраивать платежный аккаунт, вводить данные банковской карточки. Гугл при этом проверит карточку: снимет с карточки 1$ и вернет его обратно через некоторое время.

Когда подключен платежный аккаунт, то на него ежемесячно начисяется бесплатно использование карт, маршрутов или мест на сумму в размере 200 долларов США. Это примерно до 28 000 запросов. Счет на оплату будет выставлен только после того, как использование Google Maps Platform превысит ежемесячный лимит в 200 долларов.

Двигаемся дальше. Для получения API Key в консоли выбираем пункт меню «API и сервисы»

Получить Google Key

Вначале надо включить API, которые хочешь использовать. Затем надо создать необходимые учетные данные чтобы получить к нему доступ.

Получить Google Key

Выбрать сервис API можно в библиотеке. В нашем случае выбираем Google Maps JavaScript API.

Получить Google Key

При создании учетных данных нужно выбрать «Ключ API»

Получить Google Key

Через несколько секунд Google выдаст сгенерированный Google Maps API Key. Скопируй ключ и храни его в надежном месте для последующего использования.

Получить Google Key

 

2. Защита Google Maps API Key

Следующим шагом является повышение безопасности нового ключа. В консоли API нажимаем кнопку «Учетные данные» и переходим в консоли непосредственно на ссылку «ключ API».

Получить Google Key

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

Ограничить использование ключа просто. В открывшемся окне найди раздел «Ограничение для ключа».

Ограничить доступ Google Key

Если нужно отображать карты на твоем сайте — выбери вариант «HTTP источники перехода (веб-сайты)».

Это откроет новое поле, чтобы добавить туда свой домен или домены. Не забудь добавить их в требуемом формате:

*.example.com/*

где «example.com» — имя сайта.

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

Если нужно добавить несколько доменов — нужно добавить их по одному в каждую новую строку.

По окончанию нажми кнопку «Сохранить». Теперь нужно будет подождать несколько минут для регистрации внесенных изменений. И можно использовать вновь созданный ключ API, чтобы добавить Google Maps на сайт.

3. КАК Добавить карты ГУГЛ используя Google Maps API Key на сайт WordPress с темой Divi

Теперь пришло время добавить карту на сайт. Для сайта на WordPress с темой Divi эта задача очень проста.

Все, что нужно сделать, это перейти в админпанели сайта к меню «Divi» > «Настройки темы». На вкладке «Общие», прокрути вниз к полю «Google API Key». В отведенном поле вставь ключ API Map Google, а затем нажми кнопку «Сохранить изменения».

Использование в Divi Google API Key

Сохранив ключ API можно добавить Google Maps на сайт.

   3.1 Модуль «Карта» конструктора Divi Builder

Особо не вдаваясь в детали я быстро покажу, как добавить карту на веб-сайт с Divi. Для начала, откроем визуальный конструктор Divi Builder.  В админпанели WordPress создаем новую запись: «Записи» > «Добавить новую запись» > в записи нажимаем на кнопку «Использовать Divi Builder».

Включение визуального редактора Divi Builder

Затем вставьте строку и  столбец, а после  нажми кнопку  «Вставить модули».

Вставить модуль в визуальном редакторе Divi Builder

В списке модулей выбери модуль «Карта»

Вставить модуль в визуальном редакторе Divi Builder

Теперь можно приступить к настройке карт. Начать можно с указания центральной точки для карты.  Далее можно добавить неограниченное количество точек контактов на карте, нажав на кнопку «Добавить новый Pin». Модулем будет предложено указать физическое местоположение для каждого контакта.

Настройить модуль Карта в визуальном редакторе Divi Builder

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

Отображение карты

Заполнить дополнительную информацию о контакте возможно самостоятельно.
Модуль Карта поддерживает  стандартный редактор WordPress, который можно использовать для записи содержания инфобокса при клике  на «булавку». Можно также выбрать изображение из медиа-библиотеки, чтобы прикрепить его к контакту.

Отображение карты

Закончив с конкретным контактом, просто нажми кнопку «Сохранить». Это возвращает к основной карте экрана, где можно найти еще несколько дополнительных настроек отображения карты. К ним относятся запрет или разрешение изменения масштаба карты колесом мыши или возможность отключения карты на небольших устройствах, будь то мобильный телефон.

Когда все закончено — нажми  кнопку «Сохранить».
После публикации поста — на экране красуеться великолепная карта!

Отображение карты

Заключение

Надеюсь, в статье показано, что получить Google Maps API Key относительно легко.
Пользователи Divi Builder могут вставить ключ в настройках модуля «Карта» и начать добавлять на сайт карты Гугл в считанные секунды.

Делись своими замечаниями и предложениями в комментариях ниже.

Удачи!
Александр Коваль

Метки: ,