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

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

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

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

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

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

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

Получить Google Key
1.4 Следующий шаг — выберите проект. Если впервые создаете ключ API — сначала необходимо проект создать.
Скрин Как получить Google Maps API Key выбор проекта
1.4.1 Для создания проекта: дайте проекту название.

1.5. Выберите проект и нажмите кнопку «Enable Billing»(«Включить оплату») в правом нижнем углу

1.6. Далее настройте свою оплату за использование API. Дождитесь приглашения на подключение оплаты для проекта и выберите платежный аккаунт (если он у вас существует) или создайте новый платежный аккаунт.

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

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

1.7. Двигаемся дальше. После выбора аккаунта для оплаты Google предлагает включить набор сервисов API автоматически.
Скрин Как получить Google Maps API Key включение
После нажатия кнопки «Далее» API будет сгенерирован автоматически. Скопируйте ключ и храните его в надежном месте для последующего использования.
Скрин Как получить Google Maps API Key включение
1.7.1. Для «ручного» получения API Key перейдите в консоль и выберите пункт меню «API и сервисы»
Получить Google Key
1.8. Вначале надо выбрать API, которые хотите использовать в проекте. Затем надо создать необходимые учетные данные чтобы получить к API доступ.
1.8.1. Выбрать сервис API можно в библиотеке. В нашем случае выбирайте пункт меню «Библиотека» и в самой библиотеке выбирайте Google Maps JavaScript API.
Получить Google Key
1.8.2. Для созданиия учетных данных нужно выбрать пункт меню «Учетные данные» и выбрать пункт «Ключ API»
Получить Google Key
1.9. Для созданиия учетных данных нужно выбрать пункт «Ключ API»
Получить Google Key
1.10. Через несколько секунд 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

Проверять баланс Google Maps API Key (остаток запросов) можно на вкладке «Общая информация» в учетной записи на ресурсе Google Maps Platform.

Получить Google Key

4. Что делать, если Google Maps не отображаться на сайте

Бывает и такое: заходиш на сайт, а там вместо отображения карты Google Maps серое окно с уведомлением:

Получить Google Key

 Чтобы узнать подробнее, в чем ошибка надо в браузере перейти в панель разработчика. Это можно сделать нажав клавишу  F12 (для Google Chrome и Firefox).

Откроется панель разработчика и надо выбрать на ней вкладку Консоль (Console):

Получить Google Key

В окне панели будут отображены ошибки страницы. В моем случае отображается ошибка RefererNotAllowedMapError.

Расшифровку ошибок и рекомендации по их устранению можно посмотреть здесь: Maps JavaScript API Error Messages

В моем случае ошибка указывает, что текущий URL-адрес, загружающий JavaScript API карт, не был добавлен в список разрешенных ссылок. Чтобы исправить ошибку — нужно проверить настройки защиты ключа API в консоли Google Cloud Platform.

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

Как добавить карту на сайт рассмотрю на примере сайта на WordPress с темой Divi.

Для размещения карт на сайте сперва надо записать в настройках Divi ключ API Map Google. Для этого в админпанели сайта на WordPress перейдите в пункт «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 могут вставить ключ в настройках модуля «Карта» и начать добавлять на сайт карты Гугл в считанные секунды.

Если информация в статье хоть в какой-то мере полезна для вас — оцените статью (выбрав нужное количество звездочек внизу сатьи), поделитесь статей в социальных сетях и/или напишите свои вопросы, замечания и предложения в комментариях ниже.

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

Некоторые ссылки в этой статье являются партнерскими.
Если вы кликните на такую ссылку и приобретете что-либо, я получу партнерскую комиссию.