Google Maps Platform umożliwia klientom tworzenie niepowtarzalnych wrażeń dzięki dostosowywaniu wizualnego wyglądu znaczników mapy za pomocą zaawansowanych znaczników. W tym dokumencie omawiamy, jak klienci mogą pójść o krok dalej i tworzyć znaczniki, które zmieniają się dynamicznie na podstawie danych w czasie rzeczywistym.
znaczniki mapy to przydatne narzędzie do zapewnienia użytkownikom bogatych wrażeń związanych z mapami; Atrybuty znacznika, takie jak rozmiar, kolor i kształt, mogą przekazywać dodatkowe informacje o każdej zaznaczonej lokalizacji. W niektórych przypadkach te dodatkowe informacje mogą się zmieniać dynamicznie, a deweloper może chcieć zaktualizować wizualizację mapy, aby zachować wrażenie świeżości dla użytkownika.
W tym artykule używamy przykładu w celu zilustrowania sytuacji: sieć sklepów chce używać mapy do wyświetlania użytkownikom czasu oczekiwania w sklepie. Ta sama architektura może jednak służyć do wielu innych zastosowań. Oto kilka dodatkowych pomysłów:
- Dostępność pokoi hotelowych: na mapie z wynikami wyszukiwania hoteli aktualna dostępność pokoi jest ważnym sygnałem, który może zachęcić użytkowników do dokonania rezerwacji hotelu, gdy ilość miejsc się zmniejsza.
- Dostępność miejsc parkingowych: na mapie parkingów daj użytkownikom pewność, że po dotarciu znajdą miejsce parkingowe.
- Restauracje otwarte, które wkrótce się zamykają i zamknięte: na mapie z wynikami wyszukiwania restauracji ważne jest, aby użytkownicy wiedzieli, czy restauracja może być zamknięta, gdy tam dotrą.
Zaawansowane znaczniki dynamiczne
Teraz pokażę Ci, jak tworzyć mapę za pomocą zaawansowanych znaczników, aby wizualizować dane dynamiczne. Jak już wspomnieliśmy, przykładem zastosowania jest sieć sklepów detalicznych korzystająca z systemu zarządzania kolejką do kasy w celu oszacowania i wizualizacji czasu oczekiwania użytkowników. Oto architektura aplikacji:
Krok 1. Określ atrybuty, które pozwalają zdefiniować wrażenia wizualne
Pierwszym krokiem jest określenie co najmniej 1 właściwości lokalizacji, która ma być wyświetlana użytkownikom. W tym przypadku chcemy wyświetlić tylko 1 usługę: aktualny czas oczekiwania w każdej lokalizacji sklepu mierzony w minutach.
Następnie wybierz co najmniej 1 odpowiednią cechę znacznika, aby wizualnie oznaczyć czas oczekiwania na znaczniku na mapie. Lista atrybutów znacznika jest dostępna w specyfikacji PinElement. Możesz też użyć niestandardowego kodu HTML, aby uzyskać więcej opcji dostosowywania.
W tym przykładzie użyjemy 2 atrybutów znacznika do wizualizacji danych o czasie oczekiwania:
- Kolor znacznika: niebieski – czas oczekiwania poniżej 5 minut, żółty – powyżej 5 minut.
- Zawartość znacznika (wymaga niestandardowych znaczników HTML): w samym znaczniku uwzględnimy bieżący czas oczekiwania w minutach.
Krok 2. Skonfiguruj połączenie ze źródłami danych w czasie rzeczywistym
Istnieją różne sposoby łączenia się ze źródłami danych, a dobre rozwiązanie zależy od konkretnego przypadku użycia i infrastruktury technicznej. W tym przykładzie korzystamy z metody pull, w ramach której regularnie żądamy zaktualizowanych danych o czasie oczekiwania za pomocą żądań HTTP (REST). W kolejnych sekcjach znajdziesz alternatywne architektury wykorzystujące metody push.
Aby umożliwić naszej aplikacji dostęp do danych o czasie oczekiwania z naszego serwera, nasza architektura korzysta z usługi Cloud Functions dla Firebase. Cloud Functions umożliwiają zdefiniowanie funkcji backendowej, która umożliwia dostęp do tych danych i ich przetwarzanie. W naszej aplikacji internetowej uwzględniamy też bibliotekę Firebase, która umożliwia nam dostęp do funkcji w Cloud Functions za pomocą żądania HTTP.
Następnym krokiem jest zapewnienie użytkownikom aktualnych danych. Aby to zrobić, skonfigurowaliśmy timer za pomocą funkcji JavaScript setInterval z czasem oczekiwania wynoszącym 30 sekund. Za każdym razem, gdy licznik się uruchamia, wysyłamy prośbę o zaktualizowanie danych o czasie oczekiwania w sposób opisany powyżej. Po otrzymaniu nowych danych musimy odświeżyć wygląd znaczników mapy. W następnym kroku dowiesz się, jak wprowadzić te zmiany.
Krok 3. Wyświetlanie znaczników mapy
Teraz możesz renderować stylizowane znaczniki na mapie za pomocą zaawansowanych znaczników. Zaawansowane znaczniki można renderować na mapach utworzonych za pomocą interfejsu Maps JavaScript API w Google Maps Platform. Jeśli używasz zaawansowanych znaczników, pamiętaj, aby uwzględnić w żądaniu mapy JS parametr Map ID.
W poniżej pokazanym fragmencie kodu tworzymy znaczniki i definiujemy ich zawartość, tworząc element 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]
}));
Ostatnim krokiem jest zaktualizowanie tekstu znacznika i stylów CSS w przypadku każdego sklepu. Kod poniżej odczytuje zaktualizowane dane o czasie oczekiwania i przypisze styl do każdego znacznika sklepu na podstawie czasu oczekiwania:
// 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";
Mapa wykorzystuje teraz nasz istniejący interfejs API czasów oczekiwania do wizualizacji aktualnych czasów oczekiwania dla użytkowników:
Alternatywne sposoby łączenia się ze źródłami danych w czasie rzeczywistym
Połączenie z źródłami danych w czasie rzeczywistym można nawiązać na różne sposoby. Poniżej omawiamy 2 alternatywne opcje: Komunikacja w chmurze Firebase i Websockets. Bez względu na to, które podejście wybierzesz, pamiętaj o tych czynnikach, aby narzędzie do tworzenia map działało sprawnie:
- Częstotliwość aktualizacji
- Ilość danych
- Liczba znaczników w widoku mapy
- Funkcje sprzętu i przeglądarki
Komunikacja w chmurze Firebase
Komunikacja w chmurze Firebase to podejście push. Dzięki temu podejściu będziesz wysyłać do aplikacji z mapami aktualizacje za każdym razem, gdy dane o czasie oczekiwania zostaną zaktualizowane na zapleczu. Wiadomości o zmianie będą wywoływać funkcję wywołania zwrotnego, której zadaniem jest aktualizowanie wyglądu i zawartości znacznika.
Zanim wybierzesz tę architekturę, weź pod uwagę, że wymaga ona utrzymywania stałego połączenia z serwerem w przypadku każdego przeglądarki z aplikacją mapową. Z tego powodu może być droższa w eksploatacji i mniej niezawodna w kontekście problemów z połączeniem.
WebSockets
WebSockets to kolejna metoda push służąca do utrzymywania aktualności danych. Podobnie jak w poprzednim scenariuszu, możesz użyć WebSockets, aby nawiązać trwałe połączenie między backendem a aplikacją map. Korzyści funkcjonalne tego podejścia są podobne do tych, jakie daje Komunikacja w chmurze Firebase (FCM), ale może być konieczne wykonanie dodatkowych czynności w celu skonfigurowania niezbędnej infrastruktury.
Podsumowanie
Programiści mogą łączyć źródła danych w czasie rzeczywistym ze znacznikami zaawansowanymi, aby tworzyć intuicyjne wizualizacje w Mapach Google. Istnieje kilka sposobów łączenia tych źródeł danych w zależności od wymagań map, sprzętu i przeglądarki użytkownika oraz ilości danych. Zintegrowane dane można następnie wykorzystać do sterowania wyglądem i działaniem zaawansowanych znaczników w czasie rzeczywistym, co zapewni użytkownikom dynamiczne wrażenia.
Dalsze działania
Więcej informacji:
- Znaczniki zaawansowane – Centrum dla deweloperów Google
- Tworzenie znaczników za pomocą niestandardowego kodu HTML
- Cloud Functions dla Firebase
- Komunikacja w chmurze Firebase
Współtwórcy
Główni autorzy:
Jim Leflar | Inżynier rozwiązań Google Maps Platform
John Branigan | starszy inżynier ds. obsługi klienta Google Cloud Platform
Steve Barrett | Inżynier rozwiązań Google Maps Platform