Google Maps Platform umożliwia klientom tworzenie niepowtarzalnych doświadczeń 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ń z korzystania z mapy; 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 dokumencie używamy przykładu w celu zilustrowania sytuacji: sieć sklepów chce używać mapy, aby udostępnić użytkownikom czas oczekiwania w sklepie. Tę samą architekturę można jednak wykorzystać w wielu innych przypadkach użycia. 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ść dostępnych pokoi maleje.
- Dostępność miejsc parkingowych: na mapie parkingów daj użytkownikom pewność, że po wybraniu miejsca docelowego będą mieli miejsce parkingowe.
- Restauracje otwarte, zamykające się 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ą.
Rozwiązanie dynamicznych znaczników zaawansowanych
Aby wizualizować dane dynamiczne, możesz tworzyć mapy za pomocą zaawansowanych znaczników. 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 definiują wygląd
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 mapy. 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 markera do wizualizacji danych o czasie oczekiwania:
- Kolor znacznika: niebieski oznacza czas oczekiwania krótszy niż 5 minut, żółty – dłuższy niż 5 minut.
- Zawartość znacznika (wymaga niestandardowych znaczników HTML): w samym znaczniku uwzględnimy aktualny czas oczekiwania w minutach.
Krok 2. Skonfiguruj połączenie ze źródłami danych w czasie rzeczywistym
Istnieje kilka sposobów na połączenie się ze źródłami danych, a odpowiednie rozwiązanie zależy od przypadku użycia i infrastruktury technicznej. W tym przykładzie używamy podejścia typu „pull”, w którym regularnie żądamy zaktualizowanych danych o czasie oczekiwania za pomocą żądań HTTP (REST). W kolejnych sekcjach poznasz alternatywne architektury wykorzystujące metody push.
Aby umożliwić aplikacji dostęp do danych o czasie oczekiwania z naszego serwera, nasza architektura korzysta z Cloud Functions dla Firebase. Cloud Functions umożliwiają zdefiniowanie funkcji backendowej, która umożliwia dostęp do tych danych i ich przetwarzanie. Bibliotekę Firebase uwzględniamy też w naszej aplikacji internetowej, co umożliwia nam dostęp do funkcji Cloud Function za pomocą żądania HTTP.
Następnym krokiem jest zapewnienie użytkownikowi aktualnych danych. Aby to zrobić, użyliśmy minutnika z funkcją JavaScript setInterval o czasie oczekiwania 30 sekund. Za każdym razem, gdy licznik się uruchamia, prosimy o zaktualizowanie danych o czasie oczekiwania w sposób opisany powyżej. Gdy otrzymamy nowe dane, musimy odświeżyć wygląd znaczników na mapie. W następnym kroku dowiesz się, jak wprowadzić te zmiany.
Krok 3. Wyświetlanie znaczników mapy
Teraz możesz używać zaawansowanych znaczników do renderowania stylizowanych znaczników na mapie. 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 w JS parametr map ID.
W pokazanym poniżej 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. Poniższy kod 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 korzysta teraz z dotychczasowego interfejsu API Czas oczekiwania, aby wyświetlać aktualne czasy oczekiwania dla użytkowników:
Inne 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. Niezależnie od tego, które podejście wybierzesz, pamiętaj o tych czynnikach, aby narzędzie mapowe działało sprawnie:
- Częstotliwość aktualizacji
- Ilość danych
- Liczba znaczników w widoku mapy
- Możliwości sprzętu i przeglądarki
Komunikacja w chmurze Firebase
Komunikacja w chmurze Firebase to metoda push. Dzięki temu podejściu będziesz wysyłać aktualizacje do aplikacji mapy, gdy tylko dane o czasie oczekiwania zostaną zaktualizowane na zapleczu. Wiadomości o aktualizacji 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żdej przeglądarki, w której działa aplikacja map. 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. Zalety tego podejścia są podobne do zalet Komunikacji w chmurze Firebase, ale może być konieczne dodatkowe działanie w celu skonfigurowania niezbędnej infrastruktury.
Podsumowanie
Deweloperzy mogą łączyć źródła danych w czasie rzeczywistym z zaawansowanymi znacznikami, aby tworzyć intuicyjne wizualizacje w Mapach Google. Istnieje kilka sposobów na połączenie tych źródeł danych, w zależności od wymagań mapy, sprzętu i przeglądarki użytkownika oraz ilości danych. Zintegrowane dane mogą być następnie używane do kontrolowania wyglądu i działania zaawansowanych znaczników w czasie rzeczywistym, co zapewnia 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 w Google Cloud Platform
Steve Barrett | inżynier ds. rozwiązań Google Maps Platform