Jak grupować znaczniki w Google Maps

Jeśli chcesz zaprezentować dużą ilość danych geograficznych w przystępnej formie, najprawdopodobniej korzystasz z Google Maps. Kluczowe jest jednak takie przedstawienie informacji, aby użytkownicy mogli szybko zrozumieć ogólny obraz sytuacji i — w razie potrzeby — łatwo dotrzeć do szczegółów. Setki nakładających się na siebie pinezek mogą stać się barierą nie do przejścia.

W tym artykule dowiesz się, jak używać biblioteki do klasteryzacji znaczników w Google Maps, aby uniknąć ich nakładania się na siebie. Wyjaśnimy również zasadę jej działania, co pomoże Ci lepiej dostosować grupowanie do potrzeb Twojego projektu.

Dlaczego grupowanie znaczników jest tak ważne?

Aby to zrozumieć, spójrzmy na mapę Nowej Zelandii i Australii z rozproszonymi znacznikami przed zastosowaniem klasteryzacji:

Mimo dodania etykiet, wiele punktów znajduje się tak blisko siebie, że wzajemnie się zasłaniają. Chociaż lokalizacji jest mniej niż 25, ich zagęszczenie sprawia, że mapa staje się nieczytelna.

Taki widok utrudnia klientom poprawny odbiór informacji. Rozwiązaniem jest klasteryzacja (marker clustering). Dzięki prostej bibliotece open-source i niewielkiej zmianie w kodzie, możesz znacząco poprawić doświadczenia użytkowników (UX).

Klasteryzacja w Google Maps to narzędzie, które wizualnie konsoliduje pobliskie punkty, wyświetlając je jako jedną ikonę z liczbą obiektów w danym obszarze.

Włączanie klasteryzacji znaczników na mapie

Grupowanie można dodać za pomocą kilku dodatkowych linii kodu JavaScript. Poniższy przykład dotyczy map internetowych, ale podobne narzędzia są dostępne również w Google Maps Platform SDK dla systemów Android i iOS. Aby utworzyć klaster, najpierw zobaczmy, jak wygląda standardowy kod dla pojedynczych punktów:

const pos1 = {lat: -33.727111, lng: 150.371124};

const marker1 = new google.maps.Marker({position: pos1, map: map});

const pos2 = {lat: -33.718234, lng: 150.363181};

const marker2 = new google.maps.Marker({position: pos2, map: map});

Przy dziesiątkach lub setkach punktów rzadko tworzy się je pojedynczo, przypisując do osobnych zmiennych, jednak te dwa przykłady wystarczą, by zobaczyć klasteryzację w akcji.

Aby włączyć grupowanie, należy wprowadzić dwie zmiany. Po pierwsze, pobierz bibliotekę marker clustering — najlepiej z repozytorium GitHub i umieść plik JavaScript na własnym serwerze produkcyjnym. W celach demonstracyjnych skorzystamy z adresu z dokumentacji Google Maps Platform:

<script src=”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js”>

Następnie połącz mapę i znaczniki z biblioteką, dodając poniższe linie pod zmiennymi znaczników:

// stwórz tablicę ze wszystkimi znacznikami const markers = [marker1, marker2];

// ścieżka do ikon klastrów (1.png, 2.png, itd.) const imagePath = “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”;

// włącz klasteryzację dla tej mapy i tych znaczników const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});

Pamiętaj, aby na etapie produkcyjnym hostować obrazy klastrów na własnych serwerach. W tym przykładzie zostanie załadowany plik m1.png, ponieważ wymagany jest minimalny rozmiar klastra.

Podczas tworzenia instancji MarkerClusterer przekazujesz zmienną mapy, tablicę znaczników oraz ścieżkę do obrazów. Biblioteka przetwarza te dane i wyświetla ikonę klastra z liczbą punktów:

Po kliknięciu w ikonę klastra, mapa zostanie przeskalowana do poziomu, na którym oba znaczniki będą widoczne.

Gdy oddalisz widok, ikona klastra powróci, zastępując pojedyncze pinezki, gdy te zaczną na siebie nachodzić.

Ten przewodnik po klasteryzacji zawiera szczegółowe informacje i przykłady z większą liczbą punktów.

Jak działa klasteryzacja znaczników?

Biblioteka do grupowania znaczników jest częścią narzędzi open-source dostępnych w serwisie GitHub. Możesz dowolnie modyfikować jej kod. Przyjrzyjmy się, jak ogólnie działa ten algorytm.

Na początku algorytm dzieli mapę na siatkę, gdzie każda sekcja ma domyślnie wymiary 60×60 pikseli. Można to zwizualizować w następujący sposób:

W rzeczywistości siatka nie jest sztywna, lecz opiera się na samych znacznikach. Pierwszy znacznik staje się środkiem pierwszego sektora. Kolejne punkty w tym obszarze są dodawane do klastra, a jego środek jest aktualizowany na podstawie średniej pozycji wszystkich zawartych w nim znaczników. Jeśli znacznik mógłby należeć do kilku klastrów, zostanie przypisany do najbliższego na podstawie współrzędnych.

Domyślne ustawienia algorytmu sprawdzają się w większości przypadków, ale dzięki otwartemu kodowi możesz wprowadzić dowolne modyfikacje.

Dostosuj swój Google Maps Clusterer

Istnieje wiele sposobów na personalizację wyglądu klastrów. Wiele z nich nie wymaga nawet ingerencji w samą bibliotekę — wystarczy ustawić odpowiednie opcje podczas tworzenia grup.

Najprostszym sposobem na personalizację jest użycie własnych ikon. W parametrze imagePath podajemy bazową nazwę — biblioteka automatycznie doda numer (1–5) na końcu ścieżki oraz rozszerzenie (.png domyślnie). Możesz zmienić format pliku za pomocą parametru imageExtension. Pamiętaj, że przezroczyste ikony prezentują się na mapie najlepiej.

Domyślnie do utworzenia klastra potrzebne są tylko dwa znaczniki. Możesz to zmienić za pomocą opcji minimalClusterSize. Zwiększenie tej liczby może spowodować chwilowe nachodzenie na siebie pojedynczych punktów.

Oto kilka innych przydatnych opcji:

gridSize: liczba pikseli w siatce klastrów.

zoomOnClick: automatyczne przybliżenie klastra po kliknięciu.

maxZoom: maksymalny poziom przybliżenia, powyżej którego zawsze wyświetlane będą pojedyncze znaczniki.

styles: tablica obiektów definiująca styl dla każdego typu klastra (kolor tekstu, rozmiar czcionki itp.).

Przykład zastosowania powyższych opcji:

// Opcje dla marker clusterer const clusterOptions = { imagePath: “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”, gridSize: 30, zoomOnClick: false, maxZoom: 10 };

// Dodaj marker clusterer do zarządzania znacznikami. const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);

// Zmiana stylów po utworzeniu klastra const styles = markerClusterer.getStyles(); for (let i=0; i<styles.length; i++) { styles[i].textColor = “red”; styles[i].textSize = 18; }

Efekt końcowy może wyglądać tak:

Jak widać, wprowadzone zmiany skutkują większą liczbą klastrów (dzięki mniejszej siatce), a cyfry są czerwone i nieco większe.

Po kliknięciu w klaster skala się nie zmieni — użytkownik musi zrobić to ręcznie. Pojedyncze znaczniki pojawią się szybciej, a mniejszy rozmiar siatki ogranicza ryzyko nakładania się pinezek. Po osiągnięciu 10. poziomu przybliżenia wszystkie znaczniki będą widoczne osobno, bez względu na ich zagęszczenie.

Teraz masz mapę, która zamiast być zapełniona znacznikami, jest elegancko uporządkowana. Czytając jej kod, możesz znaleźć więcej sposobów na dostosowanie biblioteki grupowania znaczników. Wykorzystaj tę nową wiedzę, aby zapewnić użytkownikom lepsze wrażenia podczas korzystania z map z wieloma znacznikami.

Skontaktuj się z naszym zespołem Partnera Google Maps, aby uzyskać wsparcie techniczne lub doradztwo w implementacji tych i innych funkcji.

Co oferujemy?

• Usługi programistyczne oparte na Google Maps Platform;
• Szkolenia dla zespołów technicznych;
• Konsultacje i integrację API;
• Wsparcie techniczne.

Współpracując z nami, zyskujesz:

• Dostęp do siedmiostopniowego systemu rabatowego, dostępnego tylko u partnerów Google Maps;
• Możliwość płatności przelewem w PLN, EUR, USD lub kryptowalutach;
• Profesjonalną opiekę na każdym etapie korzystania z rozwiązań Google.