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

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

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

Для существующих пользователей Google Maps на данный момент ничего не изменяется — карты  будут отображаются на сайтах и все будет продолжать функционировать. Но как долго так будет — можно только догадываться. Мой совет: ты должен быть готов к изменениям, и поэтому необходимо получить ключ API Google Map в ближайшее время.

Если хочешь добавить новую карту на веб-сайт — выбор за тобой: или получаешь ключ API и добавляешь карту,  или отказываешься от этой затеи из-за того, что без ключа API карты Google Maps отображаться на сайте не будут.

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

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

Cейчас есть целый ряд API-интерфейсов, поддерживаемых Google для вебмастеров. Если хочешь на сайте отображать карты — используй Google Maps JavaScript API key.

Обрати внимание: Google Maps JavaScript API разделен на два плана — Standard и Premium. Большинство захочет сделать выбор в пользу стандартного плана. Стандартный план дает бесплатный доступ до 25000 загрузок карт в день. Выше этого нужно будет заплатить $0,50 за 1000 дополнительных просмотров, и так до 100,000 просмотров в день. (Если тебе повезет, чтобы генерировать трафик, который выходит за эти пределы,  можешь узнать больше о премиум-плане, нажав здесь.)

Исходя из этого давай начнем добавить карты на веб-сайтах.

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

Когда ты «вошел» в Google, перейди к странице JavaScript API Google Map — ссылка здесь.

Прокрути страницу вниз, а затем нажми большую синюю кнопку «Get a Key».

Получить Google Key

Откроется лайтбокс. Чтобы продолжить, ты должен согласиться с условиями предоставления услуг Google, а затем нажать кнопку «Принять и продолжить».

Получить Google Key

Далее ты попадаешь в диспечер API, где должен выбрать нужный сервис. В нашем случае выбираем Google Maps JavaScript 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 на веб-сайт с Divi

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

Делись своими мыслями в комментариях ниже.

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

При подготовке записи использовал статью (англ)

Метки: