Google Maps Platform umożliwia klientom tworzenie unikalnych rozwiązań dzięki dostosowywaniu wyglądu znaczników na mapie za pomocą zaawansowanych znaczników. W tym dokumencie wyjaśnimy, jak klienci mogą pójść o krok dalej i tworzyć znaczniki, które zmieniają się dynamicznie na podstawie danych w czasie rzeczywistym.
Znaczniki na mapie to przydatne narzędzie, które pozwala użytkownikom na korzystanie z rozbudowanych funkcji map. Atrybuty znacznika, takie jak rozmiar, kolor i kształt, mogą przekazywać dodatkowe informacje o każdej oznaczonej lokalizacji. W niektórych przypadkach te dodatkowe informacje mogą się zmieniać dynamicznie, a deweloper może chcieć, aby wizualizacja mapy była aktualizowana, co zapewni użytkownikowi poczucie aktualności.
W tym dokumencie używamy przykładu w celach ilustracyjnych: sieć sklepów chce użyć mapy, aby udostępnić użytkownikom informacje o czasie 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 pokazującej wyniki wyszukiwania hoteli aktualność informacji o dostępności pokoi jest ważnym sygnałem, który może zachęcić użytkowników do dokonania rezerwacji w hotelu, gdy liczba wolnych pokoi maleje.
- Dostępność miejsc parkingowych: na mapie parkingów możesz pokazywać użytkownikom, czy w miejscu docelowym będą dostępne miejsca parkingowe, gdy tam dotrą.
- Restauracje otwarte, zamykane wkrótce i zamknięte: na mapie pokazującej wyniki wyszukiwania restauracji ważne jest, aby użytkownicy wiedzieli, czy restauracja może być zamknięta, gdy do niej dotrą.
Rozwiązanie do dynamicznych znaczników zaawansowanych
Możesz utworzyć mapę z zaawansowanymi znacznikami, aby wizualizować dane dynamiczne. Jak wspomniano wcześniej, przypadkiem użycia jest sieć sklepów detalicznych, która wykorzystuje swój system zarządzania kolejkami przy kasach do szacowania i wizualizowania czasu oczekiwania dla 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świetlać tylko jedną właściwość: aktualny czas oczekiwania w każdej lokalizacji sklepu, mierzony w minutach.
Następnym krokiem jest wybranie co najmniej 1 odpowiedniego atrybutu znacznika, aby wizualnie oznaczyć czas oczekiwania na znaczniku mapy. Lista atrybutów znacznika jest dostępna od razu 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, jeśli czas oczekiwania jest krótszy niż 5 minut, żółty, jeśli jest dłuższy niż 5 minut.
- Marker contents (requires custom HTML markers) (Zawartość znacznika – wymaga niestandardowych znaczników HTML): w znaczniku podamy aktualny czas oczekiwania w minutach.
Krok 2. Skonfiguruj połączenie ze źródłami danych w czasie rzeczywistym
Istnieje wiele sposobów łączenia 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 pull, w którym regularnie prosimy o aktualne dane o czasie oczekiwania za pomocą żądań HTTP (REST). W kolejnych sekcjach znajdziesz alternatywne architektury wykorzystujące podejście push.
Aby umożliwić naszej aplikacji dostęp do danych o czasie oczekiwania z naszego serwera, nasza architektura wykorzystuje Cloud Functions dla Firebase. Cloud Functions umożliwia nam zdefiniowanie funkcji backendu, która będzie uzyskiwać dostęp do tych danych i je przetwarzać. W aplikacji internetowej uwzględniamy też bibliotekę Firebase, co umożliwia nam dostęp do funkcji w Cloud Functions za pomocą żądania HTTP.
Następnym krokiem jest zapewnienie użytkownikowi aktualnych danych. W tym celu konfigurujemy minutnik za pomocą funkcji JavaScriptu setInterval z limitem czasu wynoszącym 30 sekund. Za każdym razem, gdy minutnik się uruchamia, prosimy o zaktualizowane dane o czasie oczekiwania, jak opisano powyżej. Gdy otrzymamy nowe dane, musimy odświeżyć wygląd znaczników mapy. W następnym kroku dowiesz się, jak wprowadzić te zmiany.
Krok 3. Renderowanie znaczników mapy
Możemy teraz użyć zaawansowanych znaczników, aby wyrenderować na mapie stylizowane znaczniki. 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 w żądaniu mapy JS uwzględnić parametr identyfikatora mapy.
We fragmencie kodu poniżej 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 stylu CSS dla każdego sklepu. Poniższy kod odczytuje zaktualizowane dane o czasie oczekiwania i przypisuje styl do każdej pinezki 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 naszego interfejsu API do sprawdzania czasu oczekiwania, aby wyświetlać użytkownikom aktualne informacje:
Alternatywne sposoby łączenia się ze źródłami danych w czasie rzeczywistym
Istnieją różne sposoby łączenia się ze źródłami danych w czasie rzeczywistym. Poniżej omawiamy 2 alternatywne opcje: Komunikację w chmurze Firebase i WebSockets. Niezależnie od wybranego podejścia weź pod uwagę poniższe czynniki, aby narzędzie do tworzenia map działało wydajnie:
- 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 podejście push. Dzięki temu podejściu będziesz wysyłać aktualizacje do aplikacji mapowej za każdym razem, gdy dane o czasie oczekiwania zostaną zaktualizowane w backendzie. Wiadomości o aktualizacji będą wywoływać funkcję wywołania zwrotnego, której celem jest aktualizacja wyglądu i zawartości znacznika.
Przed wybraniem tej architektury należy wziąć pod uwagę, że wymaga ona utrzymywania stałego połączenia z serwerem dla każdej przeglądarki, w której działa aplikacja mapowa. Z tego powodu może być droższy w działaniu i mniej odporny na problemy z połączeniem.
WebSockets
WebSockets to kolejne podejście oparte na technologii push, które pozwala zachować aktualność danych. Podobnie jak w poprzednim scenariuszu, możesz użyć WebSockets, aby nawiązać trwałe połączenie między backendem a aplikacją mapy. Korzyści funkcjonalne tego podejścia są podobne do tych, które zapewnia Komunikacja w chmurze Firebase, ale skonfigurowanie niezbędnej infrastruktury może wymagać dodatkowej pracy.
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 można następnie wykorzystać do kontrolowania wyglądu i działania zaawansowanych znaczników w czasie rzeczywistym, co zapewnia użytkownikom dynamiczne wrażenia.
Następne 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 | Google Maps Platform Solutions Engineer
John Branigan | starszy inżynier ds. obsługi klienta Google Cloud Platform
Steve Barrett | Google Maps Platform Solutions Engineer