В июне 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» («Продолжить»)
1.5. Выберите проект и нажмите кнопку «Enable Billing»(«Включить оплату») в правом нижнем углу
1.6. Далее настройте свою оплату за использование API. Дождитесь приглашения на подключение оплаты для проекта и выберите платежный аккаунт (если он у вас существует) или создайте новый платежный аккаунт.
Когда подключен платежный аккаунт, то на него ежемесячно начисяется бесплатно использование карт, маршрутов или мест на сумму в размере на 200 долларов США. Это примерно до 28 000 запросов. Счет на оплату будет выставлен только после того, как использование Google Maps Platform превысит ежемесячный лимит в 200 долларов.
2. Защита Google Maps API Key
Следующим шагом является повышение безопасности нового ключа. Для этого в консоли API нажмите кнопку «Учетные данные» и перейдите непосредственно на ссылку «ключ API».
Ограничить использование ключа просто. В открывшемся окне найдите раздел «Ограничение для ключа».
Это откроет новое поле, чтобы добавить туда ваш домен или домены. Не забудь добавить их в требуемом формате:
*.example.com/*
где «example.com» — имя сайта.
В качестве подстановочного знака используйте звездочку. Если вы оставите это поле пустым, запросы будут приниматься от всех источников. Звездочки, косые и точки должны быть отформатированы так же, как в шаблоне.
Если нужно добавить несколько доменов — нужно добавить их по одному в каждую новую строку.
По окончанию нажми кнопку «Сохранить». Теперь нужно будет подождать несколько минут для регистрации внесенных изменений. И можно использовать вновь созданный ключ API, чтобы добавить Google Maps на сайт.
3. Где посмотреть баланс Google Maps API Key
Проверять баланс Google Maps API Key (остаток запросов) можно на вкладке «Общая информация» в учетной записи на ресурсе Google Maps Platform.
4. Что делать, если Google Maps не отображаться на сайте
Бывает и такое: заходиш на сайт, а там вместо отображения карты Google Maps серое окно с уведомлением:
Чтобы узнать подробнее, в чем ошибка надо в браузере перейти в панель разработчика. Это можно сделать нажав клавишу F12 (для Google Chrome и Firefox).
Откроется панель разработчика и надо выбрать на ней вкладку Консоль (Console):
В окне панели будут отображены ошибки страницы. В моем случае отображается ошибка RefererNotAllowedMapError.
Расшифровку ошибок и рекомендации по их устранению можно посмотреть здесь: Maps JavaScript API Error Messages
В моем случае ошибка указывает, что текущий URL-адрес, загружающий JavaScript API карт, не был добавлен в список разрешенных ссылок. Чтобы исправить ошибку — нужно проверить настройки защиты ключа API в консоли Google Cloud Platform.
4. КАК Добавить карты ГУГЛ используя Google Maps API Key на сайт WordPress с темой Divi
Как добавить карту на сайт рассмотрю на примере сайта на WordPress с темой Divi.
На вкладке «Общие» прокрутите вниз к полю «Google API Key». В отведенном поле вставьте ключ API Map Google, а затем нажмите кнопку «Сохранить изменения».
3.1 Модуль «Карта» конструктора Divi Builder
Особо не вдаваясь в детали я быстро покажу, как добавить карту на веб-сайт с Divi. Для начала, откроем визуальный конструктор Divi Builder.
В админпанели WordPress создаем новую запись: «Записи» > «Добавить новую запись» > в записи нажимаем на кнопку «Использовать Divi Builder».
После размещения модуля на странице можно приступить к настройке карт.
Начать можно с указания центральной точки для карты. Далее можно добавить неограниченное количество точек контактов на карте, нажав на кнопку «Добавить новый Pin». Модулем будет предложено указать физическое местоположение для каждого контакта.
Модуль Карта поддерживает стандартный редактор WordPress, который можно использовать для записи содержания инфобокса при клике на «булавку». Можно также выбрать изображение из медиа-библиотеки, чтобы прикрепить его к контакту.
Когда все закончено — нажмите кнопку «Сохранить».
После публикации на экране красуется великолепная карта!
Заключение
Надеюсь, в статье показано, что получить Google Maps API Key относительно легко.
Пользователи Divi Builder могут вставить ключ в настройках модуля «Карта» и начать добавлять на сайт карты Гугл в считанные секунды.
Если информация в статье хоть в какой-то мере полезна для вас — оцените статью (выбрав нужное количество звездочек внизу статьи), поделитесь статей в социальных сетях и/или напишите свои вопросы, замечания и предложения в комментариях ниже.
Александр Коваль
Некоторые ссылки в этой статье являются партнерскими.
Если вы кликните на такую ссылку и приобретете что-либо, я получу партнерскую комиссию.
Спасибо за статью, подробно, с фотками. Для начинающих самое — то. Побольше таких. Удачи.
Подставлять надо без звездочек и косых
Согласен, можно и так, спасибо за уточнение.
«Счет на оплату будет выставлен только после того, как использование Google Maps Platform превысит ежемесячный лимит в 200 долларов.»
не совсем так, Dynamic Maps — $7 for up to 28.000 loads per month.
Pricing: https://cloud.google.com/maps-platform/pricing/sheet/
Не совсем так, буквальный перевод фразы: «7$ при превышении 28 тыс. загрузок в месяц»
Статическая карта — до 100 000 запросов в месяц бесплатно. динамическая — до 28 тыс. А какая разница в этих картах, в чем отличие одной от другой ? Вот на сайте Wp размещаем карту , она какая считается ? Извините за глупый вопрос.
Цытирую Гугл: «API-интерфейс Maps Static позволяет вставлять изображение Google Maps на вашу веб-страницу без необходимости загрузки JavaScript или динамической загрузки страницы. Служба Maps Static API создает вашу карту на основе параметров URL, отправленных стандартным HTTP-запросом, и возвращает карту как изображение, которое вы можете отображать на своей веб-странице.» (https://developers.google.com/maps/documentation/maps-static/intro)
Александр, не совсем понял информацию касательно 28тыс . запросов и платеже в 200дол/мес.
На сколько я понял, при регистрации с меня по любому для верификации снимет и вернет 1дол.
После чего я могу создать ключ по вашему описанию и пользоваться им бесплатно если количество динамических запросов в месяц не будет превышает 28 тыс, я верно понял?
— Если да, то тогда какие запросы будут считаться динамическими, если например, для поиска адреса будет вводиться адрес через клавиатуру: Киев, ул. Черешенка 7б
А на скрипт будет обрабатывать каждую букву и искать ее на карте
п.с я использую битрикс24 црм.
скриншот: https://prnt.sc/ktwpwq
Спасибо за ответ!
Олег, как я понял, Гугл ежемесячно начисляет аккаунту «кредит» 200$. Для Dynamic Maps (Maps JavaScript API) — это 28 тыс загрузок карты, причем (цытирую Гугл):»Пользовательские взаимодействия с картой, такие как панорамирование, масштабирование или переключение слоев карты, не создают дополнительных нагрузок карты.» Предполагаю, что ввод текста не будет считаться загрузкой. По сути: загрузка — это «сеанс связи». Если «сеансов» будет больше 28 тыс/мес — тогда с аккаунта будут снимать реальные деньги.
Благодарю за статью! Очень легко и доходчиво описано.
А как проверять остаток запросов? Я вхожу под логином, но мне предлагает начать работу, а статистики по используемым запросам нет
Внес изменения в пост. Посмотреть баланс — https://divitheme.space/novyye-kak-poluchit-google-maps-api-key.html#art3