Как получить API-ключ для использования в Google Картах? Проблема с выводом Google-карты на сайте.
На сайте клиента перестала корректно отображаться Google-карта. Прямо на встроенной на странице сайте карте Google выводится сообщение многократно «For development purposes only» и модальное окно с надписью «При загрузки Google-карты на этой странице возникла проблема. Do you want own this website?». Несколько не приятно и портит вид страницы. Вид карты при этом затемнён.
До 2016 года использовать Google карты можно было без ограничений на своем сайте, но теперь ситуация изменилась и Google хочет получать себе денежку, если вы установили себе на сайт его карты и у вас много посетителей. Есть небольшое послабление. Оно заключается в том, что если у вас посетителей на сайте не много, то использование Google-карты будет для вас бесплатным. Например, если количество посетителей у вас на сайте менее 25 000, что эквивалентно загрузкам (просмотрам) 25 000 карт в день, то можно выбрать стандартный тарифный план и использовать Google карты у себя на сайте бесплатно. Если же количество загрузок карт будет более 25000, но менее 100000, то вам придётся дополнительно платить приблизительно 0,50 доллара за 1000 дополнительных просмотров.
Ссылка на сайт с ценами на использование Google-карт https://cloud.google.com/maps-platform/pricing/ Как гордо написано на странице сайта «Цены, которые масштабируются в соответствии с вашими потребностями»
Для того чтобы не видеть на Google карте у себя на сайте «гнустных» надписей и иметь возможность лицезреть все прелести масштабирования Google карты необходимо сделать следующие действия:
- Зарегистрировать Google-аккаунт или использовать уже существующий у вас аккаунт.
- Зарегистрироваться в Google Development Console.
- Создать пользователя в Google Development Console.
- Создать проект в Google Development Console.
- Включить Google API компоненты.
- Сгенерить API key.
- Включить ограничения API key
- Добиться работоспособности нормального отображения Google карты не сайте.
- Зарегистрировать Google-аккаунт или использовать уже существующий у вас аккаунт
Для входа в аккаунт Google вам нужно будет перейти на сайта https://www.google.com и зарегистрировать аккаунт или выбрать подходящий Google-аккаунт и войти в него с использованием логина и пароля.
- Зарегистрироваться в Google Development Console
Для получения API key вам придётся зарегистрироваться в консоле разработчика Google. Никуда от этого не дется. Зарегистрироваться в консоле разработчика Google можно по ссылке https://console.cloud.google.com Вам потребуется указать имя, фамилию, email, телефон. Подтверждать email и телефон немедленно не потребовалось. Как email я указал email своего Google-аккаунта.
Возможно в процессе действий по регистрации вам будет предложено подтвердить, что вы действительно являетесь владельцем сайта. Для этого вам будет предложено несколько способов подтверждения. Для меня был удобен способ, который связан с размещением в папки сайта сгенерированного Google файла.
Регистрация в консоле разработчика заканчивается подтверждением, что вы не являетесь роботом. Стандартная Google-пытка картинками на внимательность. Ура! Вы зарегистрировались в консоле разработчика теперь вам доступно API Google, но на этом ваши приключения только начинаются. Хотя мне так же интересно API Google связанное с обработкой запросов сделанных с помощью голоса.
- Создать пользователя в Google Development Console
В консоле разработчика Google от вас потребуют создать пользователя с минимальным набором параметров. Смотрите внимательно на опции внизу, может можно будет пропустить этот шаг. Возможно он опционален.
- Создать проект в Google Development Console
Без создания проекта вам не обойтись. Этот шаг обязателен, но ни очень напряжен. Вам нужно просто придумать название проекта. Для названия проекта я использовал производную от названия домена сайта, на котором мне нужно будет настроить показ Google-карт.
- Включить Google API компоненты
В меню слева выберите пункт API (библиотеки) и выберите необходимые вам компоненты. Мне рекомендовали для Google карты выбрать Maps Javascript Api и Geocoding API. Выбрав каждый компонент в отдельности надо нажать кнопку «Включить».
https://console.cloud.google.com/apis/library
- Сгенерить API key
API key представляет из себя последовательность и нескольких десятков латинских букв и цифр (40 символов). API key может быть общим для используемых двух API компоненты. По крайне мере создав API key для одного API компонента при просмотре другого API компонента, созданный мной ранее API key уже показывался, как будто он также относиться и к этому компоненту. После генерации ключа скопируйте его себе в созданный на компьютере файл (doc, txt) он пригодится вам для дальнейшего использования.
- Включить ограничения API key
Необходимо включить ограничение на API key, так как это позволит сделать учёт трафика использования Google карт более точным, что впоследствии может отразиться на ваших затратах. В данном случае надо API key настроить на переходы только с сайта. Для этого при задании ограничения надо указать URL-адрес сайта. Включение ограничения API key является способом защиты вашего ключа от использования сторонними лицами. Не дооценка этой опасности может привести к рискам возникновения дополнительных расходов.
- Добиться работоспособности нормального отображения Google карты не сайте
Как использовать ключ
Чтобы добавить Гугл Карту на сайт, вы можете воспользоваться iframe, либо же JavaScript-кодом. В обоих случаях нужен будет ключ. Более подробная информация по добавлению своего сайта на Гугл-карты описана здесь.
Вставка карты Гугл с помощью JavaScript выглядит примерно так:
<script async defer src=»https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap»type=»text/javascript»></script>
Замените YOUR_API_KEY на ранее полученный ключ и ваша карта должна заработать!
С уважением, Щукин Вадим Александрович
генеральный директор
ООО «НОРД КЛОУД СОФТ»
https://vk.com/vadim_stchukin
+7 (921) 477-29-24
