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