Google Maps Platform umożliwia klientom tworzenie unikalnych rozwiązań dzięki dostosowywaniu wyglądu znaczników mapy za pomocą znaczników zaawansowanych. Z tego dokumentu dowiesz się, 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, które pozwala użytkownikom korzystać z bogatych funkcji mapowania. 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 świeżości.
W tym dokumencie używamy przykładu, który ma charakter ilustracyjny: sieć sklepów detalicznych chce używać mapy, aby udostępniać użytkownikom informacje o czasie oczekiwania w sklepie. Jednak ta sama architektura może być używana w wielu innych przypadkach. 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 rezerwacji hotelu, gdy liczba dostępnych pokoi się zmniejsza.
- Dostępność miejsc parkingowych: na mapie parkingów możesz dać użytkownikom pewność, że po przyjeździe na miejsce docelowe znajdą wolne miejsce.
- Restauracje otwarte, zamykające się 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 przyjadą na miejsce.
Rozwiązanie dotyczące dynamicznych znaczników zaawansowanych
Możesz utworzyć mapę za pomocą znaczników zaawansowanych, aby wizualizować dane dynamiczne. Jak wspomnieliśmy wcześniej, w tym przypadku użycia sieć sklepów detalicznych korzysta z systemu zarządzania kolejkami przy kasach, aby szacować i wizualizować czas oczekiwania dla użytkowników. Oto architektura aplikacji:
Krok 1. Określ atrybuty, które mają definiować 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świetlać tylko 1 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 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, aby wizualizować dane 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.
- Zawartość znacznika (wymaga znaczników niestandardowego kodu HTML): w samym znaczniku umieścimy aktualny czas oczekiwania w minutach.
Krok 2. Skonfiguruj połączenie ze źródłami danych w czasie rzeczywistym
Istnieje kilka 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 wysyłamy żądania HTTP (REST) o zaktualizowane dane o czasie oczekiwania. W kolejnych sekcjach zobaczysz alternatywne architektury wykorzystujące podejścia 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żliwia nam zdefiniowanie funkcji backendu, która będzie uzyskiwać dostęp do tych danych i je obliczać. W naszej aplikacji internetowej uwzględniamy też bibliotekę Firebase, która umożliwia nam dostęp do Cloud Functions za pomocą żądania HTTP.
Następnym krokiem jest zapewnienie, że dane są aktualne dla użytkownika. Aby to zrobić, konfigurujemy timer za pomocą funkcji JavaScript setInterval z limitem czasu 30 sekund. Za każdym razem, gdy timer się uruchamia, wysyłamy żądanie o zaktualizowane dane o czasie oczekiwania w sposób opisany powyżej. Gdy otrzymamy nowe dane, musimy odświeżyć wygląd znaczników mapy. W następnym kroku opisujemy, jak wprowadzić te zmiany.
Krok 3. Wyrenderuj znaczniki mapy
Teraz możemy użyć znaczników zaawansowanych, aby wyrenderować stylizowane znaczniki na mapie. Znaczniki zaawansowane można renderować na mapach utworzonych za pomocą Maps JavaScript API Google Maps Platform. Gdy używasz znaczników zaawansowanych , pamiętaj, aby w żądaniu mapy JS uwzględnić parametr map ID.
W fragmencie kodu pokazanym poniżej tworzymy znaczniki i definiujemy zawartość znacznika, 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ż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 używa teraz naszego dotychczasowego interfejsu API czasu oczekiwania, aby wizualizować aktualne czasy oczekiwania dla użytkowników:
Alternatywne sposoby łączenia się ze źródłami danych w czasie rzeczywistym
Istnieje kilka sposobów łączenia się ze źródłami danych w czasie rzeczywistym. Poniżej omawiamy 2 alternatywne opcje: Komunikacja w chmurze Firebase i WebSockets. Niezależnie od wybranego podejścia pamiętaj o uwzględnieniu tych czynników, aby narzędzie do mapowania działało wydajnie:
- Częstotliwość aktualizacji
- Wolumin 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. W tym podejściu za każdym razem, gdy dane o czasie oczekiwania są aktualizowane w backendzie, wysyłasz aktualizacje do aplikacji mapy. Wiadomości z aktualizacjami będą wywoływać wywołanie zwrotne, którego celem jest aktualizowanie wyglądu i zawartości znacznika.
Zanim wybierzesz tę architekturę, musisz pamiętać, że wymaga ona utrzymywania stałego połączenia z serwerem w przypadku każdej przeglądarki, w której działa aplikacja mapy. Z tego powodu może być droższa w utrzymaniu i mniej odporna na problemy z połączeniem.
WebSockets
WebSockets to kolejne podejście push, które pozwala zachować aktualność danych. Podobnie jak w poprzednim scenariuszu, możesz użyć WebSockets, aby nawiązać stałe połączenie między backendem a aplikacją mapy. Korzyści funkcjonalne tego podejścia są podobne do Komunikacji w chmurze Firebase, ale może być wymagana dodatkowa praca przy konfigurowaniu niezbędnej infrastruktury.
Podsumowanie
Deweloperzy 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ń mapy, sprzętu i przeglądarki użytkownika oraz woluminu danych. Zintegrowane dane można następnie wykorzystać do sterowania wyglądem znaczników zaawansowanych w czasie rzeczywistym, co zapewnia użytkownikom dynamiczne wrażenia.
Następne kroki
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 Inżynier rozwiązań
John Branigan | Starszy inżynier ds. obsługi klienta Google Cloud Platform
Steve Barrett | Inżynier rozwiązań Google Maps Platform