Платформа Google Карт позволяет клиентам создавать уникальные решения, настраивая визуальный дизайн маркеров на карте с помощью расширенных маркеров. В этом документе мы расскажем, как пойти ещё дальше и создать маркеры, которые динамически меняются на основе данных, поступающих в реальном времени.
Маркеры на карте – это полезный инструмент, который позволяет предоставлять пользователям подробную информацию. Атрибуты маркера, такие как размер, цвет и форма, могут передавать дополнительную информацию о каждом отмеченном местоположении. В некоторых случаях эта дополнительная информация может динамически меняться, и разработчик может захотеть, чтобы визуализация карты обновлялась, поддерживая у пользователя ощущение актуальности.
В этом документе мы используем пример для иллюстрации: сеть розничных магазинов хочет использовать карту, чтобы сделать время ожидания в магазине доступным для пользователей. Однако эту же архитектуру можно использовать и для многих других целей. Вот ещё несколько идей:
- Наличие номеров в гостинице. На карте с результатами поиска гостиниц показывается актуальная информация о наличии номеров. Это важный сигнал, который может побудить пользователей забронировать номер в гостинице, пока они ещё есть.
- Наличие парковочных мест. На карте парковок пользователи могут выбрать место назначения, где они смогут припарковаться.
- Рестораны, которые открыты, скоро закроются или уже закрыты. На карте с результатами поиска ресторанов важно показывать пользователям, какие из них могут быть закрыты к моменту их прибытия.
Решение для динамических расширенных маркеров
Вы можете создать карту с расширенными маркерами, чтобы визуализировать динамические данные. Как упоминалось ранее, в качестве примера мы используем сеть розничных магазинов, которая использует систему управления очередями на кассах для оценки и визуализации времени ожидания для пользователей. Вот как выглядит архитектура приложения:
Шаг 1. Определите атрибуты, которые будут задавать визуальное оформление
Сначала определите, какие свойства местоположения вы хотите показывать пользователям. В этом случае мы хотим показать только одно свойство: текущее время ожидания в каждом магазине, измеряемое в минутах.
Следующий шаг – выбрать один или несколько атрибутов маркера, чтобы визуально аннотировать время ожидания на маркере карты. Список атрибутов маркера доступен в спецификации PinElement. Вы также можете использовать собственный HTML-код, чтобы получить больше возможностей для настройки.
В этом примере мы будем использовать два атрибута маркера для визуализации данных о времени ожидания:
- Цвет маркера: синий, если время ожидания меньше пяти минут, и желтый, если больше.
- Содержимое маркера (требуются маркеры с собственным HTML-кодом). В маркер будет включено текущее время ожидания в минутах.
Шаг 2. Настройте подключение к источникам данных в реальном времени
Существует несколько способов подключения к источникам данных, и правильное решение зависит от вашего варианта использования и технической инфраструктуры. В этом примере мы используем подход pull, при котором мы регулярно запрашиваем обновленные данные о времени ожидания с помощью HTTP-запросов (REST). В следующих разделах вы увидите альтернативные архитектуры, использующие push-подходы.
Чтобы приложение могло получать данные о времени ожидания с нашего сервера, мы используем Cloud Functions for Firebase. Cloud Functions позволяет нам определить функцию бэкенда для доступа к этим данным и их вычисления. Мы также включаем библиотеку Firebase в наше веб-приложение, что позволяет нам получать доступ к нашей функции Cloud Function с помощью HTTP-запроса.
Теперь нужно обеспечить актуальность данных для пользователя. Для этого мы настраиваем таймер с помощью функции JavaScript setInterval с задержкой в 30 секунд. Каждый раз, когда срабатывает таймер, мы запрашиваем обновленные данные о времени ожидания, как описано выше. Получив новые данные, мы должны обновить внешний вид маркеров на карте. В следующем шаге описано, как это сделать.
Шаг 3. Отрисовка маркеров на карте
Теперь мы можем использовать расширенные маркеры, чтобы отобразить стилизованные маркеры на карте. Расширенные маркеры можно отрисовывать на картах, созданных с помощью Maps Javascript API платформы Google Карт. При использовании расширенных маркеров обязательно включите параметр идентификатора карты в запрос карты JS.
В приведенном ниже фрагменте кода мы создаем маркеры и определяем их контент, создавая элемент div HTML:
// 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 времени ожидания, чтобы показывать пользователям актуальные данные:
Альтернативные способы подключения к источникам данных в реальном времени
Подключиться к источникам данных в реальном времени можно разными способами. Ниже мы рассмотрим два альтернативных варианта: Firebase Cloud Messaging и Websockets. Какой бы подход вы ни выбрали, учитывайте следующие факторы, чтобы обеспечить высокую производительность инструмента:
- Частота обновлений
- Объем данных
- Количество маркеров в области просмотра карты
- Возможности оборудования и браузера
Firebase Cloud Messaging
Firebase Cloud Messaging – это подход на основе push-уведомлений. При таком подходе вы будете отправлять обновления в приложение карты каждый раз, когда данные о времени ожидания обновляются на сервере. Сообщения об обновлении будут запускать функцию обратного вызова, которая будет обновлять внешний вид и содержимое маркера.
При выборе этой архитектуры следует учитывать, что она требует поддержания постоянного подключения к серверу для каждого браузера, в котором запущено картографическое приложение. Поэтому его использование может быть более затратным и менее надежным в случае проблем с подключением.
WebSockets
WebSockets – ещё один подход на основе push-уведомлений, позволяющий поддерживать актуальность данных. Как и в предыдущем сценарии, вы можете использовать WebSockets для установления постоянного соединения между вашим бэкендом и приложением карты. Функциональные преимущества этого подхода аналогичны Firebase Cloud Messaging, однако для настройки необходимой инфраструктуры может потребоваться дополнительная работа.
Заключение
Разработчики могут объединять источники данных в реальном времени с расширенными маркерами, чтобы создавать наглядные визуализации на Google Картах. Существует несколько способов подключения этих источников данных в зависимости от требований к карте, оборудования и браузера пользователя, а также объема данных. Интегрированные данные можно использовать для управления внешним видом расширенных маркеров в реальном времени, чтобы сделать карту более динамичной.
Дальнейшие действия
Дополнительные ресурсы
- Расширенные маркеры – Google Developers
- Как создать маркер с собственным кодом HTML
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Авторы
Основные авторы:
Джим Лефлар (Jim Leflar) | инженер по решениям, платформа Google Карт
Джон Браниган (John Branigan) | старший инженер по работе с клиентами, Google Cloud Platform
Стив Барретт (Steve Barrett) | разработчик решений платформы Google Карт