Как получить Google Maps API Key бесплатно — инструкция
В статье пройдем шаги, необходимые для получения ключа API Google Map по состоянию на март 2019 года, а затем для примера добавим Google Maps на сайт с конструктором Divi Builder.
1. Получить Google Maps API Key — пошагово
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» — имя сайта.
В качестве подстановочного знака используйте звездочку. Если вы оставите это поле пустым, запросы будут приниматься от всех источников. Звездочки, косые и точки должны быть отформатированы так же, как в шаблоне.
Если нужно добавить несколько доменов — нужно добавить их по одному в каждую новую строку.
По окончанию нажми кнопку «Сохранить». Теперь нужно будет подождать несколько минут для регистрации внесенных изменений. И можно использовать вновь созданный ключ API, чтобы добавить Google Maps на сайт.
3. Где посмотреть баланс Google Maps API Key
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». Модулем будет предложено указать физическое местоположение для каждого контакта.
Когда все закончено — нажмите кнопку «Сохранить».
Заключение
Надеюсь, в статье показано, что получить Google Maps API Key относительно легко.
Пользователи Divi Builder могут вставить ключ в настройках модуля «Карта» и начать добавлять на сайт карты Гугл в считанные секунды.
Если информация в статье хоть в какой-то мере полезна для вас — оцените статью (выбрав нужное количество звездочек внизу статьи), поделитесь статей в социальных сетях и/или напишите свои вопросы, замечания и предложения в комментариях ниже.
Некоторые ссылки в этой статье являются партнерскими.
Если вы кликните на такую ссылку и приобретете что-либо, я получу партнерскую комиссию.
Похожие записи
12 комментариев
Спасибо за статью, подробно, с фотками. Для начинающих самое — то. Побольше таких. Удачи.
Подставлять надо без звездочек и косых
Согласен, можно и так, спасибо за уточнение.
Не совсем так, буквальный перевод фразы: «7$ при превышении 28 тыс. загрузок в месяц»
Цытирую Гугл: «API-интерфейс Maps Static позволяет вставлять изображение Google Maps на вашу веб-страницу без необходимости загрузки JavaScript или динамической загрузки страницы. Служба Maps Static API создает вашу карту на основе параметров URL, отправленных стандартным HTTP-запросом, и возвращает карту как изображение, которое вы можете отображать на своей веб-странице.» ( https://developers.google.com/maps/documentation/maps-static/intro )
На сколько я понял, при регистрации с меня по любому для верификации снимет и вернет 1дол.
После чего я могу создать ключ по вашему описанию и пользоваться им бесплатно если количество динамических запросов в месяц не будет превышает 28 тыс, я верно понял?
— Если да, то тогда какие запросы будут считаться динамическими, если например, для поиска адреса будет вводиться адрес через клавиатуру: Киев, ул. Черешенка 7б
А на скрипт будет обрабатывать каждую букву и искать ее на карте
п.с я использую битрикс24 црм.
скриншот: https://prnt.sc/ktwpwq
Олег, как я понял, Гугл ежемесячно начисляет аккаунту «кредит» 200$. Для Dynamic Maps (Maps JavaScript API) — это 28 тыс загрузок карты, причем ( цытирую Гугл ):»Пользовательские взаимодействия с картой, такие как панорамирование, масштабирование или переключение слоев карты, не создают дополнительных нагрузок карты.» Предполагаю, что ввод текста не будет считаться загрузкой. По сути: загрузка — это «сеанс связи». Если «сеансов» будет больше 28 тыс/мес — тогда с аккаунта будут снимать реальные деньги.
Благодарю за статью! Очень легко и доходчиво описано.
А как проверять остаток запросов? Я вхожу под логином, но мне предлагает начать работу, а статистики по используемым запросам нет
Как получить ключ API для Google Maps
Статья для тех, до кого только в 2020 году добрались всемогущие руки Google. Отвечаем почему карта Google больше не работает на Вашем сайте и появилась надпись For development purposes only. И как теперь быть.
Суть проблемы
Раньше вы наверняка и не задумывались о работе карты на странице Контакты, но ситуация изменилась. В 2018 году Google выпустил новый инструмент — Google Maps Platform, а вместе с ней и новые лицензионные соглашения. Если кратко, было объявлено, что данная платформа упростит управление картами для пользователей. Ведь вместо 18 программных интерфейсов все объединилось в три — Карты, Места, Маршруты.
Мы тоже во время разработки добавляли клиентские проекты в свой аккаунт, так как допустимых бесплатных лимитов всегда хватало. Пока в начале этого года не получили письмо от Google с новыми правилами.
Теперь нашим клиентам (и вообще всем, у кого слетела карта Google на сайте) необходимо создать свой персональный проект в Google Maps Platform и, дабы восстановить работу, получить ключ API.
Для чего нужен API ключ и почему Вам необходимо самостоятельно присоединиться к Google Maps Platform
Простым языком, ключ API – это секретный уникальный идентификатор вашей учетной записи. Этот ключ нужен для аутентификации вашего проекта в сервисах Google.
Создать свой проект в Google Maps Platform и сгенерировать ключ самостоятельно придется потому, что необходимо подвязать свои платежные данные — карту. Напоминаем, что по новым правилам превышения лимитов использования Google Maps — удовольствие не бесплатное. Подробнее о ценах и условиях ниже.
Для справки.
Google может потребовать подтвердить Ваши персональные данные — отправить скан документов (паспорт, водительское удостоверение). Не стоит волноваться, так как это нормальный процесс при транзакционных операциях. Подробнее в справке Google.
Сколько стоит Google Maps API
Стоимость зависит от расходов — ничего удивительного. Если пользователи вашего сайта взаимодействуют с картой нечасто, да и сам трафик небольшой, то скорее всего не придется платить:
Когда Google «расщедрился»
А теперь вернемся к реальности и подсчитаем сколько раз в месяц можно использовать Google Maps, чтобы не превышать эту сумму.
Начнем с того, что каждая услуга (динамическая карта, просмотр улиц, описание места, маршрут к нему, фото и т.д.) по новым правилам считается отдельно (а не как раньше — комплексно).
И что странно, для нас (и всего мира) прайс такой же, как и для США.
Теперь по лимитам. Раньше никто не волновался по поводу Google Maps, так как нам представляли 750 тыс. бесплатных запросов по карте. Ежемесячно. А сейчас — 28 тыс. в месяц.
Как подсчитать цену, к примеру, для обычной динамической карты (смотрим тариф из таблицы для динамической), которая используется на большинстве сайтов.
1) Предположим, с ней взаимодействовали 15 тыс. раз за месяц.
2) Предположим, с динамической картой взаимодействовали 99 тыс. раз.
3) Если количество взаимодействий попадает под третью категорию, к примеру 120 тыс. взаимодействий.
Разбиваем эту сумму на 100000 (тариф для второй категории) и 20000 (относится к третьей):
4) Сверх 500 тыс. взаимодействий рассчитываются при помощи менеджера по продажам Google. Они обещают скидку, а какой там тариф на самом деле можем только догадываться.
При использовании нескольких SKU (см. таблицу), их нужно суммировать.
Как получить API key Google Maps бесплатно
Ключ API вы получите и так бесплатно, но карту придется подвязать даже, если вы не собираетесь превышать лимиты.
Есть способ сгенерировать API key Google Maps без подвязки карты и создания платежного аккаунта. Несколькими месяцами ранее мы им пользовались — предоставлялось 500 загрузок карты в день. Теперь же квота — 1 загрузка в день, а чтобы увеличить ее нужен платежный аккаунт.
$200 в месяц покроют:
Что будет, если просрочить отплату
Согласно условиям обслуживания Google, за просроченный платеж Google может начислять проценты по просроченным суммам в размере 1,5% в месяц (или самую высокую допустимую ставку в конкретной стране) от даты ожидаемого платежа до даты совершения полной оплаты. И конечно приостановит работу Google Maps на сайте.
Клиент также обязан возместить Google все разумные расходы (включая гонорары адвокатов), понесенные Google при сборе просроченных платежей, за исключением случаев, когда такие платежи связаны с неточностями выставления счетов со стороны корпорации.
Отметим, что оплачивать можно как картой, так и счет-фактурой.
А оно мне вообще надо?
Нужно взвешивать все «за» и «против». Конечно, с такими ценами даже страшно сотрудничать с Google Maps. C другой стороны, карта на сайте значительно упрощает пользовательский опыт и отказываться от нее совсем не стоит.
Тем более есть способы не тратить больше положенного или использовать альтернативные варианты карты Google – об этом ниже.
Инструкция как получить Google Maps API
Буквально пару шагов и проблема решена.
1. Создайте свой аккаунт Google, если такого нет (регистрация почты Gmail). Войдите в свой аккаунт, если он есть.
2. Перейдите на платформу по этой ссылке cloud.google.com/maps-platform.
3. Клик по кнопке Get Started:
4. В открывшейся новой вкладке отмечаем галочками все пункты:
5. Далее заполняем поля. Обратите внимание, что тип аккаунта зависит от того, как вы планируете оплачивать (даже если не планируете). Выберите Бизнес, если будете платить от лица компании, организации или учебного учреждения. В остальных случаях подойдет вариант Личный:
На счету должен быть минимум доллар — система спишет эту сумму, а позже вернет. Это стандартная проверка.
7. Следующее окно для включения API:
8. А вот и наш ключ, его нужно скопировать для дальнейшего использования. И нажать Готово.
9. Ключ готов. Осталось только защитить данные — настроить ограничения для работы ключа, чтобы, при попадании к сторонним лицам, он не работал. После нажатия кнопки Готово, Вы попали на этот экран, где нужно кликнуть по Защитить учетные данные:
10. В разделе Допустимый типа приложений выбрать HTTP-источники перехода:
11. В разделе Ограничения для веб-сайтов нужно Добавить элемент. Скопируйте адрес своего сайта и вставьте в это поле вот в таком формате — https://*.q-seo.com.ua/*
12. В разделе Допустимые API выбирайте Применить ограничения для ключа и из раскрывающегося списка выбрать тот API, который Вам нужен. Например, если карта будет на сайте, то Maps JavaScript API. Если помимо сайта, будет в приложении на Android и IOS, то отметить галочками также Maps SDK for Android Maps SDK for IOS:
Готово — ключ создан и защищен.
В интерфейсе есть ежедневные квоты на использование разных API. Квоты можно ограничить.
Обратите внимание. Если у вас несколько API (для приложений, например), то суточный лимит нужно разделить между ними.
Переходим в раздел Квоты, выбираем Редактировать Лимит:
Все, можно не переживать за перерасход.
Дополнительно можно установить оповещение о бюджете, чтобы вы могли понимать сколько уже потратилось.
Как еще можно сэкономить в Google Maps
В Google Maps Platform можно оптимизировать использование карт. Если кратко — заменить дорогие услуги более дешевыми и выгодными.
Эти варианты подойдут, если на сайте не нужны расширенные функции карты по типу построения маршрута, спутникового изображения и т. д., но при этом есть необходимость в более, чем 28 тыс. загрузок.
2. Встраиваемые API Google Maps. Динамическая карта с одним обозначением местоположения. При клике на нее открывается окно Google Карты. Бесплатно до 500000 загрузок в месяц.
Бывает, что специфика сайта требует возможность построения маршрутов, расширенного функционала для мест. Оптимизировать их использование для экономии также можно, но и это не копейки. В таком случае поговорим об альтернативах Google Карты.
Есть ли альтернативы Google Карт
Альтернатив много, но сразу отметим, что по качественным характеристикам все уступают картам Google. При этом альтернативные сервисы карт стоят более, чем в 10 раз, дешевле и предоставляют больше лимитов. Есть и бесплатные.
Не стоит ожидать от других карт такой же идеальной работы. Хотя решение этой проблемы есть — добавлять на сайт несколько провайдеров карт для подстраховки.
Наиболее популярен у нас 2GIS — подробная карта в Украине и, собственно, бесплатная. Карта детально прорисована, отображаются заведения. Есть весь необходимый расширенный функционал.
Еще доступные варианты в Украине (частично платные и платные):
Сам дизайн карты — на любителя, но указано, что можно настроить стиль под себя.
Дизайн более современный, хорошая детализация. Пользователь может выбрать 7 стилей карты, в том числе и спутниковый формат. Отображаются различные заведения вокруг.
Tilda: как добавить карту
Сегодня разберемся, как добавить карту в ваш проект на конструкторе Tilda. Блочный конструктор Tilda не требует знаний программирования, поэтому такой необходимый инструмент для раздела «Контакты», как карта, сможем внести на сайт буквально за пару минут.
В уже созданном проекте или на пустой странице добавляем новый блок через значок + между блоками. Слева в выпадающем окне у вас появится список с различными вариантами блоков, наводим курсор на подзаголовок «Контакты» и выбираем один из 4 вариантов блоков с картой, тот, который больше вам подходит, и кликаем на него. После чего блок добавится к нам на сайт.
После добавления карты необходимо, чтобы на ней отображалась интересующая вас локация. Для этого нужно зайти в Яндекс.Карты или Гугл карты, Tilda поддерживает оба варианта, в строке поиска необходимо задать интересующий вас адрес, далее нужно нажать иконку «поделиться», и ниже отобразятся широта и долгота.
Рис. 2. Широта и долгота в картах.
Возвращаемся к проекту. В нашем вновь добавленном блоке выбираем «Контент» в верхнем меню:
Рис. 3. Редактирование карты.
Начинанием редактировать блок и добавлять необходимый нам адрес, заполняя поля: «заголовок», «текст» и другие. Выбираем источник карт (Гугл или Яндекс карты), переходим в раздел «точка на карте», заполняем поля «заголовок точки», «описание» и переносим координаты с карты (рис. 2). Нажимаем поле в правом верхнем углу окна «сохранить и закрыть».
Рис. 4. Широта и долгота в картах Tilda.
С какими проблемами вы можете столкнуться: карта пропала
Карта добавлена на наш сайт, но через некоторое время карта может перестать отображаться или перестанет быть активной. Чтобы этого избежать, нужно получить API Key для Яндекс карт или Гугл карт.
Получить API Key не так уж и трудно, рассмотрим на примере Яндекса (в Гугле последовательность действий та же). Для этого необходимо войти в Кабинет разработчика и нажать кнопку «Подключить API».
Рис. 5. Кабинет разработчика.
Далее выбираем сервис JavaScript API и HTTP Геокодер.
Рис.6. JavaScript API и HTTP Геокодер.
После чего жмем «Продолжить». Заполняем анкету и следуем дальнейшим инструкциям «Кабинета разработчика», и через несколько минут ключ у вас. После того, как вы получили ключ, его необходимо скопировать и вернуться в проект на Tilda, добавить его в поле ключ для Maps API. И не забываем нажать красную кнопку «Сохранить и закрыть».
Рис. 7. Поле для ключа API.
Обращаем ваше внимание, что после сохранения ключа на сайте, нужно некоторое время, чтобы он заработал.
После этого можно быть уверенным, что карта на сайте будет отображаться корректно и не пропадет со временем.
