Привлекайте клиентов в режиме реального времени с помощью Advanced Markers & Огневая база

Платформа Google Maps позволяет пользователям создавать уникальные пользовательские интерфейсы, настраивая визуальный дизайн маркеров на карте с помощью расширенных маркеров . В этом документе мы рассмотрим, как пользователи могут пойти еще дальше и создавать маркеры, которые динамически изменяются на основе данных в реальном времени.

На главном изображении показана карта Google Maps JS с центром в Сан-Франциско. В нескольких местах отображаются цветные маркеры с пометками «2 мин» или «4 мин». Цветовая гамма и содержимое обновляются с течением времени.

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

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

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

Решение Dynamic Advanced Markers

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

Архитектурная схема иллюстрирует доступ пользователя к веб-приложению. Веб-приложение использует инфраструктуру Google (GMP и Firebase Cloud Functions). Firebase Cloud Functions получает доступ к данным в режиме реального времени из бэкэнда клиента.

Шаг 1 — Определение атрибутов, определяющих визуальное восприятие.

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

Следующий шаг — выбор одного или нескольких соответствующих атрибутов маркера для визуального отображения времени ожидания на маркере карты. Список атрибутов маркера доступен по умолчанию в спецификации PinElement . Вы также можете использовать собственный HTML-код для более широких возможностей настройки.

В этом примере мы будем использовать два атрибута маркера для визуализации данных о времени ожидания:

  • Цвет маркера : синий — для времени ожидания менее 5 минут, желтый — для времени ожидания более 5 минут.
  • Содержимое маркера (требуются пользовательские HTML-маркеры) : мы включим текущее время ожидания в минутах непосредственно в сам маркер.

Шаг 2 — Настройка подключения к источникам данных в реальном времени

Существует несколько способов подключения к источникам данных, и правильное решение зависит от вашего сценария использования и технической инфраструктуры. В этом примере мы используем подход «запроса», при котором мы регулярно запрашиваем обновленные данные о времени ожидания с помощью HTTP-запросов (REST). В следующих разделах вы увидите альтернативные архитектуры, использующие подход «отправки данных».

Для обеспечения доступа нашего приложения к данным о времени ожидания с сервера, наша архитектура использует Cloud Functions для Firebase . Cloud Functions позволяют нам определять функции бэкэнда для доступа к этим данным и их вычисления. Мы также включаем библиотеку Firebase в наше веб-приложение, что позволяет нам получать доступ к нашей Cloud Function с помощью HTTP-запроса.

Следующий шаг — обеспечить актуальность данных для пользователя. Для этого мы устанавливаем таймер с помощью функции ` setInterval JavaScript с таймаутом в 30 секунд. Каждый раз, когда таймер срабатывает, мы запрашиваем обновленные данные о времени ожидания, как описано выше. После получения новых данных необходимо обновить внешний вид маркеров на карте. На следующем шаге подробно описано, как внести эти изменения.

Шаг 3 — Отображение маркеров на карте

Теперь мы можем использовать расширенные маркеры для отображения стилизованных маркеров на карте. Расширенные маркеры можно отображать на картах, созданных с помощью API карт Google Maps Platform на JavaScript . При использовании расширенных маркеров обязательно указывайте параметр ID карты в запросе карты на JavaScript.

В приведенном ниже фрагменте кода мы создаем маркеры и определяем их содержимое, создавая HTML-элемент `div`:

// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");

// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
      map,
      position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
      content: storeWaitLabels[store_index]
    }));

Последний шаг — обновление текста маркера и CSS-стилей для каждого магазина. Приведённый ниже код считывает обновлённые данные о времени ожидания и назначает стили каждому маркеру магазина в зависимости от времени ожидания:

// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
     if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
     else storeWaitLabels[store_index].className = "wait-under-5";

Теперь карта использует наш существующий API для отображения актуального времени ожидания для пользователей:

На главном изображении показана карта Google Maps на JavaScript с центром в Сан-Франциско. В нескольких местах отображаются цветные маркеры с указанием времени «2 мин» или «4 мин». Цвет и содержимое обновляются с течением времени.

Альтернативные способы подключения к источникам данных в режиме реального времени

Существует несколько способов подключения к источникам данных в режиме реального времени. Ниже мы рассмотрим два альтернативных варианта: Firebase Cloud Messaging и Websockets. Какой бы подход вы ни выбрали, обязательно учитывайте следующие факторы, чтобы ваш картографический инструмент оставался производительным:

  • Частота обновлений
  • Объем данных
  • Количество маркеров на карте
  • Аппаратные и браузерные возможности

Firebase Cloud Messaging

Firebase Cloud Messaging использует подход «push-уведомлений». При таком подходе вы будете отправлять обновления в картографическое приложение каждый раз, когда данные о времени ожидания обновляются на бэкэнде. Сообщения об обновлениях будут запускать функцию обратного вызова, цель которой — обновить внешний вид и содержимое маркера.

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

Веб-сокеты

WebSockets — это ещё один подход, основанный на передаче данных методом push-уведомлений, для поддержания их актуальности. Как и в предыдущем случае, вы можете использовать WebSockets для установления постоянного соединения между вашим бэкэндом и картографическим приложением. Функциональные преимущества этого подхода схожи с Firebase Cloud Messaging, однако может потребоваться дополнительная работа по настройке необходимой инфраструктуры.

Заключение

Разработчики могут объединять источники данных в реальном времени с расширенными маркерами для создания интуитивно понятных визуализаций на Google Maps. Существует несколько способов подключения этих источников данных в зависимости от требований к карте, оборудования и браузера пользователя, а также объема данных. Интегрированные данные затем можно использовать для управления внешним видом расширенных маркеров в реальном времени, обеспечивая динамичный пользовательский опыт.

Следующие действия

Дополнительная литература:

Авторы

Основные авторы:

Джим Лефлар | Инженер по решениям для платформы Google Maps

Джон Браниган | Старший инженер по работе с клиентами Google Cloud Platform

Стив Барретт | Инженер по решениям для платформы Google Maps