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