Избавьте себя от боли и страданий, следуя моему пути (и решению) по добавлению Google Maps в ваше приложение.

Я работаю над большим проектом уже несколько месяцев. У меня есть список задач, и я стараюсь их выполнять по крупицам.

На этой неделе я приступил к задаче «Добавить карты Google». Я всегда предполагал, что это будет относительно простая задача. В конце концов, Карты Google существуют всегда, а Google удобен для разработчиков. Вскоре я понял, что мои ожидания [снова] были ошибочными! 😜

Конечно, первое, что я сделал, - это Google добавил карты Google в мое приложение. Я прочитал множество статей. Прочитал кучу документации на сайте Google Maps Platform.

Излишне говорить, что я был поражен объемом найденной информации. Я понятия не имел, что API Карт Google на самом деле является платформой, состоящей из многочисленных API-интерфейсов.

… Чтобы назвать несколько… 😵

В моем случае у меня был набор данных, включающий адреса. Я просто хотел, чтобы на выходе была небольшая карта Google, указывающая на этот адрес. Звучит просто, правда?

В конце концов, на самом деле все оказалось очень просто. Сложность заключалась в фильтрации информации и выяснении того, какие процессы действительны, применимы и актуальны для моего сценария. Итак, вот что я узнал, и я надеюсь, что это поможет кому-то другому достичь желаемого результата быстрее и с меньшими усилиями, чем мне! 👍

Дизайн

Основываясь на моем дизайне, я решил, что мне нужно, чтобы карта была отдельным «компонентом» в моем компоненте элемента списка. Я мог либо найти существующий компонент, либо создать свой собственный, либо, как минимум, использовать iframe.

Варианты

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

Я создаю это приложение, используя Quasar Framework. Quasar Framework включает в себя множество компонентов, но для Google Maps ничего нет. Еще у них есть библиотека расширений приложений, но и там не везет. Я нашел обсуждения на форуме Quasar по этой теме, но, в конце концов, я не нашел хороших ответов, просто те же вопросы (и разочарования), которые были у меня.

Quasar Framework построен на Vue.js. Следующим логичным местом для поиска был NPM, чтобы узнать, опубликовал ли кто-нибудь пакет для Vue и Google Maps. Было найдено более 40 пакетов, но ничего из того, что я искал, не было именно тем, что мне было нужно. Я действительно поиграл с парой пакетов, но обнаружил, что они предназначены для разных сценариев, или они предполагали, что у меня есть широта и долгота. У меня был только адрес. Некоторые пакеты специально предназначены для мобильных устройств. Многие пакеты были старше и не поддерживали Webpack. За каждой дверью, казалось, была другая проблема. Один из тех дней…

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

Через несколько часов я оставил поиск компонентов и пакетов и начал смотреть на прямое взаимодействие с API Google Maps Platform (GMP). Короче говоря, я знаю, что слишком поздно, вот где я приземлился.

Решение

Сначала я решил проблему задом наперед. Я знал, что мне нужна «встроенная» карта. Одним из [многих] API, включенных в GMP, является Maps Embed API. Звучит прекрасно!

Первый пример этого API в документации Google:

Из этого я, очевидно, знал, что мне нужен ключ API. Хорошая новость в том, что для этого была очевидная ссылка с прямыми инструкциями:

Map Embed API также заявляет, что он должен использоваться внутри iframe. Это здорово, так как это был один из моих вариантов при работе над дизайном. Поэтому мне нужно было только получить URL-адрес карты и заполнить атрибут src для iframe. Звучит просто! 😥

URL для встраивания имеет такую ​​структуру:

https://www.google.com/maps/embed/v1/{MODE}?key={YOUR_API_KEY}&parameters

Где:

{MODE} может быть одним из place, search, view, directions или streetview.

{YOUR_API_KEY} - ваш бесплатный ключ API.

parameters включают необязательные параметры, а также параметры, зависящие от режима.

Читая о различных режимах, я определил, что место было лучшим для моего сценария. Режим места может принимать либо экранированный адрес, либо place_id. Основываясь на найденных мной примерах, я остановился на параметре place_id.

Поскольку все, что у меня было в моих данных, было адресной строкой, мне все еще нужно было выяснить, как получить place_id.

После дополнительных (так называемых часов выдергивания волос) исследований я нашел API геокодирования. Оказывается, этот API принимает адресную строку и возвращает не только place_id, но и все детали «геокодирования», необходимые для других API GMP.

Например, вот запрос и ответ, найденные в документации API геокодирования:

Запрос:

https://maps.googleapis.com/maps/api/geocode/json \
?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA \ &key=YOUR_API_KEY

Ответ:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1600",
               "short_name" : "1600",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Amphitheatre Parkway",
               "short_name" : "Amphitheatre Pkwy",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Mountain View",
               "short_name" : "Mountain View",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Santa Clara County",
               "short_name" : "Santa Clara County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "94043",
               "short_name" : "94043",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
         "geometry" : {
            "location" : {
               "lat" : 37.4267861,
               "lng" : -122.0806032
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.4281350802915,
                  "lng" : -122.0792542197085
               },
               "southwest" : {
                  "lat" : 37.4254371197085,
                  "lng" : -122.0819521802915
               }
            }
         },
         "place_id" : "ChIJtYuu0V25j4ARwu5e4wwRYgE",
         "plus_code" : {
            "compound_code" : "CWC8+R3 Mountain View, California, United States",
            "global_code" : "849VCWC8+R3"
         },
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}

В середине этого потрясающего вывода вы можете увидеть place_id. Бинго! Я чувствовал, что это правильный API, потому что я мог бы использовать его для Map Embed API и других GMP API, если я решу использовать их в будущем.

Как я уже упоминал ранее, в итоге решение оказалось очень простым:

  1. Сделать запрос в Geocoding API с моим адресом
  2. Верните place_id
  3. Сделайте запрос к Map Embed API с place_id
  4. Вернуть URL встроенной карты
  5. Поместите URL-адрес в атрибут src iframe
  6. Болейте от азарта! 👏

Выше мой файл `google.js`, который я вызываю, чтобы получить URL-адрес карты.

  1. Из своего приложения я вызываю функцию getGoogleMapUrl, передавая значение моего адреса. То, что вы здесь передаете, довольно гибкое, поскольку в моем источнике данных была улица, город, штат и почтовый индекс.
  2. Функция getGoogleMapUrl вызывает функцию getGoogleGeocode.
  3. Функция getGoogleGeocode экранирует адрес (заменяет пробелы знаком "+") и вызывает API геокодирования.
  4. Весь результат геокодирования возвращается в getGoogleMapUrl.
  5. Значение place_id извлекается и вставляется в URL-адрес Embed API.
  6. Этот URL-адрес возвращается моему приложению и напрямую назначается атрибуту iframe src.

Результат

После нескольких часов разочарования я наконец смог насладиться плодами своего труда. Хотя меня разочаровало то, что эта задача оказалась не такой простой, как я предполагал, конечный результат оказался именно тем, чего я хотел, и это меня полностью удовлетворило. Настолько, что это вдохновило меня на написание моей первой статьи!

Изображение, используемое в разделе «Дизайн» выше, взято из скриншота рабочего приложения. Я могу управлять размером карты, начальным масштабированием и кликабельностью.

Это именно то, что я хотел!

Уроки выучены

Помимо борьбы за поиск подходящего API, на этом пути было еще несколько подводных камней (разве это не всегда так?).

Включение API

В Google Cloud Console вы должны включить все индивидуальные GMP API, которые вы будете использовать.

Сеть ссылок в документации Google в конечном итоге привела меня к общему руководству «Приступая к работе» по GMP, в котором показаны основные предварительные условия. Вам потребуется учетная запись Google и проект Google Cloud с включенным биллингом. Затем включите каждый API и создайте ключ API. Звучит просто! 😥

Как вы можете видеть здесь, я включил геокодирование, встраивание карт, JavaScript для карт и API мест. В представленном мною решении используются только API-интерфейсы геокодирования и встраивания карт. Остальные были включены во время моих проб и ошибок, но я решил оставить их, так как я продолжу изучать больше API GMP.

Затраты на использование

Мне нужно глубже изучить связанные с этим затраты. Я знаю, что у каждого API своя модель ценообразования. Каждый месяц вам предоставляется кредит в размере 200 долларов США для выполнения всех запросов GMP. В виджете выставления счетов ниже вы можете увидеть красную линию, указывающую этот кредитный лимит, и полосу под ней, которая начинает отображаться на июнь. Это результат моих усилий по разработке и тестированию.

Вам нужно будет самостоятельно изучить цены, поскольку я не могу гарантировать, что ваша реализация будет квалифицироваться как бесплатное решение.

Метрики

Консоль Google Cloud предоставляет показатели использования API; однако я обнаружил, что показатели не обновляются в реальном времени. Я не видел никаких показателей с момента первоначального тестирования до следующего дня.

Другие статьи Троя Морленда



Трой Морленд - средний
Используете ли вы Vue, Vuex и Cloud Firestore? Даже если вы не используете Firestore, вам все равно следует прочитать эту статью, потому что… graypes.medium.com