www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Kategorie markerów i polilinii

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

Czy na Twojej mapie znajduje się zbyt dużo markerów, lub są one zbyt blisko siebie, czyniąc mapę nieczytelną? A może chcesz udostępnić inernaucie eleganckie rozwiązanie kategoryzacji markerów? Nieważne, którą z powyższych motywacji się kierujesz, gdyż rozwiązanie jest jedno. W tej części kursu napiszemy aplikację, która wyświetla skategoryzowane markery, i umożliwia na pokazywanie/ukrywanie poszczególnych grup.

Przechowywanie kategorii

Przy tworzeniu każdego markera, nadamy mu właściwość kategoria. Jej wartością będzie jakiś identyfikator kategorii. Odwołanie do tak utworzonego markera dodajemy do globalnej tablicy markery.

Następnie przy wywołaniu funkcji pokazującej / ukrywającej wybrane kategorie, należy dla każdego markera z tablicy markery sprawdzić wartość właściwości kategoria. Jeśli jest ona równa kategorii, którą ukrywamy/pokazujemy, należy odpowiednio ukryć/pokazać marker za pomocą funkcji setVisibility(true) do pokazania i setVisibility(false) do ukrycia.

Szczegóły implementacji

Dodawanie markera (nic nadzwyczajnego poza ustawieniem kategorii w linii 10)

// ta funkcja dodaje marker we współrzędnych lat, lon, o tytule: tytul, opisie: opis, kategorii: kategoria, i ikonce z pliku ikona_url
function dodajMarker(lat,lon,tytul,opis,kategoria,ikona_url)
{
	var opcjeMarkera =
	{
		position: new google.maps.LatLng(lat, lon),
		map: mapa,
		title: tytul,
		icon: new google.maps.MarkerImage(ikona_url)
	}
	
	var marker = new google.maps.Marker(opcjeMarkera);
	marker.kategoria = kategoria;
	markery.push(marker);
									
	google.maps.event.addListener(marker,"click",function()
	{
		dymek.setContent(zawartoscOkna(tytul,opis));
		dymek.open(mapa, marker);
	});				
}

Pokazywanie / ukrywanie kategorii:

// ta funkcja pokazuje lub ukrywa markery danej kategorii, zgodnie z przekazanymi argumentami
function ukryjPokazKategorie(kategoria,pokaz)
{
	// kategoria oznacza id kategorii której widzialność trzeba zmienić
	// jeśli pokaz = false, to znaczy że mamy ukryć, w przeciwnym wypadku pokazać
	
	// dla każdego z markerów
	for(var i=0; i<markery.length; i++)
	{
		// jeśli poszukiwana kategoria jest kategorią markera
		if(markery[i].kategoria==kategoria)
		{
			// to go ukrywamy lub pokazujemy, w zależności od argumetu pokaz
			markery[i].setVisible(pokaz);
		}
	}
}
			
// ta funkcja jest wywoływana przy kliknięciu na pole checkbox
function przerysuj(checkbox, kategoria)
{
	// jeśli kliknięty checkbox jest zaznaczony, to wywołujemy funkcję z parametrem, mówiącym że ma pokazać markery
	// jeśli kliknięty checkbox nie jest zaznaczony, to wywołujemy funkcję z parametrem, mówiącym że ma ukryć markery			
	if(document.getElementById(checkbox).checked)
		ukryjPokazKategorie(kategoria,true);
	else
		ukryjPokazKategorie(kategoria,false);
}

Funkcja przerysuj() przyjmuje dwa argumenty - id checkboxa oraz string z identyfikatorem kategorii. Jej działanie polega na sprawdzeniu, czy checkbox jest w(y)łączony i wywołaniu funkcji właściwej z odpowiednim parametrem.

Oczywiście, dwa powyższe fragmenty kodu to nie wszystko - należy jeszcze stworzyć pole z checkboxami i nadać im odpowiednie zdarzenia onclick. Ze względu na dość prosty poziom zadania nie będę omawiał tych rzeczy szczegółowo - kod wraz z komentarzami dostępny jest w przykładzie 1: przykład 1pokaż kod przykładu

Dodanie paska bocznego

Dodamy pasek boczny, który będzie wyświetlał widoczne na mapie markery. Markery ukryte nie będą pokazywane.

Pasek boczny

Sidebar będzie w rzeczywistości komórką tabeli, do której wstawiana będzie lista markerów z linkami do otwarcia okien informacyjnych.

W momencie kliknięcia na wybór kategorii oraz załadowania się strony wykonamy funkcję odswiezSidebar(), która uaktualni listę markerów.

function odswiezSidebar()
{
	var html='<ul style="height: 364px; overflow: auto;">'
	var licznik=0;
	for(i=0; i<markery.length; i++)
	{
		if(markery[i].getVisible())
		{
			html+='<li><a href="#" onclick="markery['+i+'].pokazInfo(); return false;">'+markery[i].title+'</a><br />'+markery[i].opis+'</li>';
			licznik++;
		}
	}
	html+='</ul>';
	if(licznik!=i)
		html='<h2>Obiekty</h2>Wyświetlono <strong>'+licznik+'</strong> z <strong>'+i+'</strong> obiektów'+html;
	else
		html='<h2>Obiekty</h2>'+html;
	document.getElementById('sidebar').innerHTML=html;
}

Jeśli nie wyświetlono wszystkich markerów (i!=licznik) to wyświetla się stosowny napis. Do sprawdzenia, czy marker jest ukryty użyto funkcji getVisible(), która - zgodnie z nazwą - zwraca true jeśli marker jest widoczny i false jeśli nie jest.

Z powodu konieczności wprowadzenia oznaczeń markerów, wprowadziłem drobne zmiany w porównaniu z poprzednim przykładem: oprócz właściwości kategoria, markery mają jeszcze właściwość opis (ich zawartość jest zgodna z nazwą). Otwieranie okien informacyjnych zebrałem w prototypowanej funkcji pokazInfo() klasy Marker.

google.maps.Marker.prototype.pokazInfo=function()
{
	dymek.setContent(zawartoscOkna(this.title,this.opis));
	dymek.open(mapa, this);
};

Gdzie dymek to globalny obiekt InfoWindow:

var dymek = new google.maps.InfoWindow(); 

Aby całość wyglądała milej dla oka, dodałem odrobinę CSS. Cały efekt wygląda następująco (kod źródłowy zawiera komentarze, wyjaśniające działanie): przykład 2pokaż kod przykładu

Kategorie polilinii

Na podobnej zasadzie można zaprogramować pokazywanie/ukrywanie polilinii, należących do wybranych kategorii. Obiekty klasy Polyline mają zaimplementowaną metodę setVisibility(), którą można wykorzystać analogicznie jak w przypadku markerów: przykład 3pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie znaczników na mapę

API v3

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Pogoda na mapie

API v3

Jak wyświetlić stan pogody przy użyciu Google Maps API?


Popularne, darmowe ikony dla markerów

API v3

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej


Wyświetlanie polilinii na pewnym zoomie

API v3

Prosta funkcja, pozwalająca pokazywać polilinie jedynie na wybranych poziomach zoomu