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:

Zobacz także:
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: