Google Maps Platform umożliwia klientom tworzenie wyjątkowych treści przez dostosowywanie projektu wizualnego znaczników mapy za pomocą zaawansowanych znaczników. W tym dokumencie omówimy, jak klienci mogą pójść o krok dalej i utworzyć znaczniki, które zmieniają się dynamicznie na podstawie danych gromadzonych w czasie rzeczywistym.
Znaczniki map są przydatnym narzędziem do wzbogacania map przez użytkowników. Atrybuty znaczników, takie jak rozmiar, kolor i kształt, mogą przekazywać dodatkowe informacje o każdej oznaczonej lokalizacji. W niektórych przypadkach te dodatkowe informacje mogą zmieniać się dynamicznie, więc deweloper może chcieć, aby wizualizacja mapy była aktualizowana, aby zapewnić użytkownikowi aktualność.
W tym artykule posłużymy się przykładem do celów poglądowych: sieć sklepów chce wykorzystać mapę, aby pokazać użytkownikom czas oczekiwania na ofertę sklepu. Tej samej architektury można jednak używać w wielu innych przypadkach. Oto kilka dodatkowych pomysłów:
- Dostępność pokoi hotelowych: na mapie wyświetlającej wyniki wyszukiwania hoteli aktualność informacji o dostępności pokoi to ważny sygnał, który może zachęcić użytkowników do dokonania rezerwacji w danym hotelu w miarę spadku asortymentu.
- Dostępność miejsc parkingowych: zadbaj o to, aby użytkownicy mogli bez obaw wybrać miejsce parkingowe na mapie po dotarciu na miejsce.
- Otwarte, wkrótce zamknięte i zamknięte: użytkownicy powinni wiedzieć, że po przyjeździe na mapę z wynikami wyszukiwania restauracji dana restauracja może być zamknięta.
Rozwiązanie dynamicznych znaczników zaawansowanych
Przyjrzyjmy się teraz tworzeniu mapy przy użyciu zaawansowanych znaczników do wizualizacji danych dynamicznych. Jak już wspomnieliśmy, przykładem zastosowania może być sieć sklepów detalicznych, która korzysta ze swojego systemu zarządzania kolejkami do szacowania i wizualizowania czasu oczekiwania użytkowników. To architektura aplikacji:
Krok 1. Określ atrybuty, które pozwolą zdefiniować wrażenia wizualne
Pierwszym krokiem jest wybranie co najmniej jednej właściwości lokalizacji, którą chcesz wyświetlać użytkownikom. W tym przypadku chcemy wyświetlić tylko 1 usługę: bieżący czas oczekiwania w każdej lokalizacji sklepu (mierzony w minutach).
Następnym krokiem jest wybranie co najmniej 1 odpowiedniego atrybutu znacznika, aby wizualnie dodać do niego czas oczekiwania. Lista atrybutów znacznika jest gotowa do użycia w specyfikacji PinElement. Możesz też używać niestandardowego kodu HTML, aby mieć dostęp do bardziej rozbudowanych opcji dostosowywania.
W tym przykładzie użyjemy 2 atrybutów znaczników, aby zwizualizować dane dotyczące czasu oczekiwania:
- Kolor znacznika: niebieski oznacza czas oczekiwania poniżej 5 minut, żółty – dłużej niż 5 minut.
- Zawartość znacznika (wymaga niestandardowych znaczników HTML): uwzględnimy w samym znaczniku bieżący 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 to, jakie rozwiązanie będzie odpowiednie, zależy od konkretnego przypadku użycia i infrastruktury technicznej. W tym przykładzie stosujemy metodę pull, w której regularnie otrzymujemy zaktualizowane dane o czasie oczekiwania za pomocą żądań HTTP (REST). W kolejnych sekcjach przedstawiamy 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. Dzięki Cloud Functions możemy zdefiniować funkcję backendu, która umożliwi dostęp do tych danych i ich obliczenie. Udostępniamy też w naszej aplikacji internetowej bibliotekę Firebase, dzięki której możemy uzyskać dostęp do funkcji w Cloud Functions za pomocą żądania HTTP.
Następnym krokiem jest dbanie o to, aby dane użytkownika były aktualne. W tym celu zastosowaliśmy funkcję JavaScript setInterval z minutnikiem, który ma ustawiony czas oczekiwania wynoszący 30 sekund. Za każdym razem po uruchomieniu licznika czasu żądania zostaną zaktualizowane dane o czasie oczekiwania w sposób opisany powyżej. Po uzyskaniu nowych danych musimy odświeżyć wygląd znaczników mapy. W następnym kroku opisujemy, jak wprowadzić te zmiany.
Krok 3 - Renderuj znaczniki mapy
Teraz możemy użyć zaawansowanych znaczników do renderowania na mapie stylizowanych znaczników. Zaawansowane znaczniki można renderować na mapach utworzonych za pomocą interfejsu Maps JavaScript API w Google Maps Platform. Jeśli używasz znaczników zaawansowanych, pamiętaj, by w żądaniu mapy JS uwzględnić parametr identyfikatora mapy.
We fragmencie kodu pokazanym poniżej tworzymy znaczniki i określamy ich treść, 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 w każdym sklepie. Ten kod odczytuje zaktualizowane dane o czasie oczekiwania i przypisuje styl do każdego kodu PIN 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 czasu oczekiwania, aby zwizualizować aktualne czasy oczekiwania użytkowników:
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: Komunikacja w chmurze Firebase (FCM) i Websockets. Niezależnie od wybranej metody, pamiętaj o następujących czynnikach, aby zapewnić skuteczność narzędzia mapy:
- 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 (FCM) to metoda push. Dzięki temu będziesz wysyłać aktualizacje do aplikacji do map po każdej aktualizacji danych o czasie oczekiwania w backendzie. Wiadomości aktualizacji będą aktywować funkcję wywołania zwrotnego, której celem jest zaktualizowanie wyglądu i zawartości znacznika.
Przed wybraniem tej architektury musisz pamiętać, że wymaga ona utrzymywania stałego połączenia z serwerem dla każdej przeglądarki, w której uruchomiono aplikację map. Z tego powodu jego uruchomienie może być droższe, a w kontekście problemów z połączeniem może być mniej niezawodne.
WebSockets
WebSockets to kolejne podejście oparte na push do utrzymywania aktualności danych. Podobnie jak w poprzednim scenariuszu, możesz użyć protokołu WebSockets do ustanowienia trwałego połączenia między backendem a aplikacją map. Korzyści funkcjonalne tego podejścia są podobne do funkcji Komunikacji w chmurze Firebase, ale skonfigurowanie niezbędnej infrastruktury może wymagać dodatkowej pracy.
Podsumowanie
Programiści mogą łączyć źródła danych w czasie rzeczywistym z zaawansowanymi znacznikami, aby tworzyć intuicyjne wizualizacje w Mapach Google. Źródła danych można połączyć na kilka sposobów w zależności od wymagań dotyczących map, sprzętu użytkownika, przeglądarki i ilości danych. Zintegrowane dane mogą być następnie wykorzystywane do kontrolowania w czasie rzeczywistym wyglądu i działania znaczników zaawansowanych, co zapewnia użytkownikom dynamikę.
Następne działania
Więcej informacji:
- Zaawansowane znaczniki – Google Developer Center
- Tworzenie znaczników za pomocą niestandardowego kodu HTML
- Cloud Functions dla Firebase
- Komunikacja w chmurze Firebase
Współtwórcy
Główne 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 rozwiązań Google Maps Platform