Этот пост является продолжением моей серии статей о том, как использовать Google Cloud под названием Up and Running, и это часть 5. Каждый пост посвящен определенной части Google Cloud, чтобы помочь вам с тем, что для вас важнее всего.
Если вам интересно, ознакомьтесь с другими моими статьями на https://medium.com/@calebmackdaven.
Возможно, вы захотите встроить карту Google прямо на свой веб-сайт, и если это так, в этом посте я предлагаю самый простой способ сделать это. Я расскажу, как вы можете получить карту любого места, которое вы хотите добавить, используя только HTML-код.
Это будет короткий пост, но творчество полностью зависит от вас. Я создал веб-сайт, связанный с несколькими API-интерфейсами, связанными с пивом, которые отображали местоположение пивоварен и позволяли вам создать свое личное путешествие по пивоварне и поделиться им с друзьями.
Для начала вам понадобится несколько вещей.
- Аккаунт GCP
- Доступный в настоящее время облачный проект (который работает — или нет, но помогает)
Вы можете получить доступ к проекту, который я буду использовать для этого поста, здесь. Убедитесь, что вы находитесь на ветке 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.
- Если вы включили ограничения, убедитесь, что ваши утвержденные URL-адреса совпадают с базовым URL-адресом, с которого вы получаете данные.
"up-and-running1.appspot.com" – подходит
"up-and-running1.appspot.com/maps" – не требуется - Убедитесь, что координаты, которые вы подключаете, действительны. Если вы ищете на Картах Google направление куда-либо, вы можете получить координаты из URL-адреса.
https://www.google.com/maps/dir/33.4964621,-86.8095148/Sloss+Furnaces +Национальный+Исторический+Достопримечательность,+1236,+20+32nd+St+N,+Бирмингем,+AL+35222/@33.5104867,-86.8204586,14z/
Если вам понравилось то, что вы прочитали, пожалуйста, дайте мне знать в комментариях или не стесняйтесь проверить мои другие статьи. Что вы собираетесь реализовать теперь, когда у вас есть Google Maps, интегрированные в ваш веб-сайт?