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.

Dodanie funkcjonalnego paska bocznego

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

W tej części kursu poznasz, jak łatwo i w efektowny sposób udostępnić użytkownikom pasek boczny, z klikalnymi pozycjami, aktualizowany automatycznie w oparciu o dodawane markery.

Stworzenie paska

W porównaniu do poprzednich przykładów, zmniejszyłem szerokość mapy o 200px, wstawiłem ją do dwukomórkowej tabeli. Do prawej komórki wstawimy element o szerokości 200px, w którym będzie pasek boczny:

<table style="border: 0; border-collapse: collapse; width: 700px;">
	<tr>
		<td>
			<div id='mapka' style='width: 500px; height: 400px; border: 1px solid black; background: gray;'></div>
		</td>
		<td>
			<div style="width: 200px; height: 400px; overflow: auto;">
				<ul id="pasekBoczny"><!-- pasek boczny --></ul>
			</div>
		</td>
	</tr>
</table>

Pasek boczny będzie w rzeczywistości listą. Na razie jest pusty, o jego zapełnienie zadbamy w dalszej części. Zwróć uwagę na fragment definiujący wygląd elementu div w prawej komórce: overflow: auto. Przy jednoczesnym podaniu wymiarów (200x400) jeśli tekst nie będzie się mieścił w takim kontenerze, to zostaną wyświetlone paski do jego przesuwania. Bardzo praktyczne, jak zobaczysz później.

Generowanie zawartości paska bocznego

Aby generować zawartość paska bocznego, musimy użyć specjalnie przygotowanej funkcji do dodawania markerów:

function dodajMarker(nazwa,wspolrzedne)
{
	var opcje_markera = 
	{
		position: wspolrzedne,
		title: nazwa,
		map: mapa
	};
	var marker = new google.maps.Marker(opcje_markera);
	marker.txt = nazwa;
	
	google.maps.event.addListener(marker,'click',function()
	{
		dymek.open(mapa,marker);
		dymek.setContent(marker.txt);
	});
	document.getElementById('pasekBoczny').innerHTML+='<li><a href="#" onclick="mapa.panTo(new google.maps.LatLng('+wspolrzedne.lat()+','+wspolrzedne.lng()+')); return false;">'+nazwa+'</a></li>';
}

Przykład użycia:

dodajMarker('Wolin',new google.maps.LatLng(53.84685581614309, 14.604949951171875));

Po dodaniu markera, wewnętrzny kod HTML paska bocznego zostanie rozszerzony o nowy element listy, zawierający nazwę markera. Po jej kliknięciu mapa wycentruje się do współrzędnych, w których ten marker jest. Zobacz działanie oraz pełny kod (wraz z dodatkowym stylem CSS) w przykładzie 1: przykład 1pokaż kod przykładu

Odświeżanie zawartości paska bocznego

Rozwiązanie z powyższego przykładu jest w porządku, jeśli zamierzasz jedynie dodawać markery. Jeśli jednak w trakcie działania aplikacji będziesz chciał usunąć, lub zmienić właściwości markera, to powyższy przykład będzie pod tym względem nieużyteczny. Ze względów praktycznych lepiej napisać osobną funkcję do generowania zawartości paska bocznego.

Konieczne będzie stworzenie globalnej tablicy, zawierającej odwołania do markerów na mapie. Przy dodawaniu markera należy dopisać go do tablicy, a następnie wywołać funkcję, która odświeży pasek boczny.

Załóżmy, że tablica markery zawiera markery, każdy z nich posiada właściwość .txt, zawierającą nazwę markera. Oto kod, odpowiedzialny za odświeżenie paska bocznego:

function odswiezPasekBoczny()
{
	var html='';
	for(var i=0; i<markery.length;i++)
	{
	
		html+='<li><a href="#" onclick="otworzMarker('+i+'); return false;">'+markery[i].txt+'</a></li>';
	}
	document.getElementById('pasekBoczny').innerHTML=html;
}

Zwróć uwagę, że w tym przykładzie po kliknięciu nie chcemy jedynie centrowania na markerze. Naszym zamiarem będzie otwarcie dymka informacyjnego z jego nazwą. Stąd, potrzebna jest dodatkowa funkcja odpowiedzialna za realizację tej rzeczy:

function otworzMarker(id)
{
	if(markery.length-1<id)
		return;
	dymek.open(markery[id].getMap(), markery[id]);
	dymek.setContent(markery[id].txt);
}

Pamiętaj, że po dodaniu markera musisz dodać go do tablicy (markery.push(marker)), a po dodaniu wszystkich markerów wywołać funkcję odswiezPasekBoczny(). Sprawdź to na przykładzie 2: przykład 2pokaż kod przykładu

Odświeżanie w trakcie działania aplikacji

Poprzedni przykład zawierał już funkcję do odświeżania, ale była ona użyta na początku - później pasek boczny był statyczny. W przykładzie 3 markery można usuwać po kliknięciu. Usunięcie markera wywołuje funkcję odswiezPasekBoczny(), i usuwa marker z listy. Zobacz przykład 3: przykład 3pokaż kod przykładu

Zwróć uwagę na prototypowaną funkcję usun() klasy Marker:

google.maps.Marker.prototype.usun = function()
{
	if(confirm('Czy na pewno usunąć ten marker?'))
	{
		var tab = [];
		for(var i=0; i<markery.length; i++)
		{
			if(markery[i]!=this)
				tab.push(markery[i]);
		}
		markery=tab;
		this.setMap(null);
		odswiezPasekBoczny();
	}
}

Działanie funkcji jest bardzo proste, sprowadza się do wyświetlenia monitu z prośbą o potwierdzenie wykonania operacji. W przypadku odpowiedzi pozytywnej, tablica markerów zostanie przepisana od nowa, pomijając usuwany element (linie 8-9). Na końcu ustawiamy odniesienie do mapy dla usuwanego markera na null i odświeżamy pasek boczny. Oczywiście, wszystkie te operacji można było zawrzeć w zwykłej funkcji, bez korzystania z prototypowania. Czasem jednak takie posunięcie przynosi wymierne korzyście, dlatego warto wiedzieć, jak to robić.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Kategorie markerów i polilinii

API v3

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


Wyświetlanie informacji na mapie

API v3

Kurs podstaw cz. V: Dodawanie tekstu i obrazków w dymkach informacyjnych


Dostosowanie powiększenia do markerów

API v3

Kurs pokazuje, jak wyświetlić mapę tak, by wszystkie markery były widoczne


Wbudowane kontrolki i sterowanie

API v3

Kurs podstaw cz. VI: Dodawanie wbudowanych kontrolek i definiowanie sterowania mapy