Этот пост является продолжением моей серии статей о том, как использовать Google Cloud под названием Up and Running, и это часть 5. Каждый пост посвящен определенной части Google Cloud, чтобы помочь вам с тем, что для вас важнее всего.

Если вам интересно, ознакомьтесь с другими моими статьями на https://medium.com/@calebmackdaven.

Возможно, вы захотите встроить карту Google прямо на свой веб-сайт, и если это так, в этом посте я предлагаю самый простой способ сделать это. Я расскажу, как вы можете получить карту любого места, которое вы хотите добавить, используя только HTML-код.

Это будет короткий пост, но творчество полностью зависит от вас. Я создал веб-сайт, связанный с несколькими API-интерфейсами, связанными с пивом, которые отображали местоположение пивоварен и позволяли вам создать свое личное путешествие по пивоварне и поделиться им с друзьями.

Для начала вам понадобится несколько вещей.

  1. Аккаунт GCP
  2. Доступный в настоящее время облачный проект (который работает — или нет, но помогает)

Вы можете получить доступ к проекту, который я буду использовать для этого поста, здесь. Убедитесь, что вы находитесь на ветке google-maps. Давайте погрузимся!

Зайдите в свой облачный проект Google, с которым вы хотите работать, и перейдите в библиотеку API.

Здесь есть много вариантов, если вы ищете Карты. Какой из них вы выбираете?

Каждый из них служит определенной цели. Мне очень нравится работать с несколькими в сочетании — например, с геокодированием и матрицей расстояний. Геокодирование преобразует адреса в координаты, которые необходимо ввести в матрицу расстояний. С его помощью вы можете создавать действительно крутые концепции.

Это действительно простой проект, просто выберите Maps JavaScript API и включите его.

Теперь нам нужно создать соответствующий ключ для доступа к API. Вы можете перейти по этой ссылке, предоставленной вам после завершения включения Maps JavaScript API, или просто перейти на вкладку учетных данных в диспетчере API.

Мы хотим создать ключ API для этого доступа. В моих предыдущих статьях мы использовали только ключи учетной записи службы. Доступ к ключу API немного отличается, поскольку он не предназначен для пользователя. Мы рассмотрим это через мгновение.

Вы получите свой ключ здесь, держите его под рукой или подключите его к странице maps.html с помощью предоставленного кода. Я продолжу и пройдусь по ограничениям, поэтому нажмите клавиша ограничения.

Из-за того, как я собираюсь это использовать, я выбираю HTTP-рефереры, потому что я встроил карту в HTML-код, и она просто отправит HTTP-запрос к API.

Я авторизовал определенные домены, которые, как я знаю, будут иметь к нему доступ. Из второй части моей серии я запустил этот проект и запустил его в домене, поэтому я добавил эти URL-адреса сюда.

Наконец, если этот ключ действительно попадет в чужие руки, я действительно не хочу, чтобы он открывал доступ к каждому отдельному API. Это также просто плохая практика. Поэтому я ограничил его исключительно API, с которым мы здесь работаем — Maps JavaScript API.

Если вы собираетесь использовать несколько API карт вместе для определенного проекта, я бы рекомендовал добавить в этот список другие API, а не создавать отдельные.

В этот момент, если я попытаюсь запустить это локально, я получу ошибку. Это потому, что я ограничил этот ключ, чтобы он работал только с указанными мной доменами. Если вам нужен локальный ключ, просто снимите эти ограничения.

Если я перейду на один из моих авторизованных URL-адресов, я очень быстро увижу именно то, что ищу. Работающая встроенная карта с включенным указателем в определенном месте.

Это здорово, если вы хотите показать пользователям местоположение вашего магазина или определенную точку на карте. Хотя этот API может быть немного ограничивающим, если вы используете его в сочетании с несколькими другими, вскоре вы можете получить что-то действительно классное.

Ошибки

Итак, если у вас возникли какие-либо проблемы, скорее всего, ваша проблема заключается в следующем:

Если вам понравилось то, что вы прочитали, пожалуйста, дайте мне знать в комментариях или не стесняйтесь проверить мои другие статьи. Что вы собираетесь реализовать теперь, когда у вас есть Google Maps, интегрированные в ваш веб-сайт?