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: