Poznaj Google Maps API

Dodanie funkcjonalnego paska bocznego

« powrót do listy kategorii

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)
{
	// stworzenie markera
	var marker = new GMarker(wspolrzedne,{title: nazwa});
	marker.txt = nazwa;
	
	// dodanie nasłuchu na kliknięcie, by otworzyć okienko informacyjne
	GEvent.addListener(marker,'click',function()
	{
		marker.openInfoWindowHtml(marker.txt);
	});
	
	// dodanie markera na mapę
	mapa.addOverlay(marker);
	
	// dodanie zawartości do paska bocznego
	document.getElementById('pasekBoczny').innerHTML+='<li><a href="#" onclick="mapa.panTo(new GLatLng'+wspolrzedne+'); return false;">'+nazwa+'</a></li>';
}

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 kodem 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;
	markery[id].openInfoWindowHtml(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: 2

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 GMarker.

Ręczne wstawianie linków do markerów w tekście

Sidebar wygląda elegancko, ale czasem zachodzi potrzeba umieszczenia kilku linków do markerów w tekście. Jest to dość proste do osiągnięcia, w tym celu napisałem dwie funkcje:

function otworzMarkerPoId(id)
{
	if(markery.length-1<id)
		return;
	markery[id].openInfoWindowHtml(markery[id].txt);
}

Ta funkcja przyjmuje jeden argument, i otwiera okienko informacyjne markera o tym indeksie. Proste i klarowne.

function otworzMarkerPoNazwie(nazwa)
{
	for(var i=0; i<markery.length; i++)
	{
		if(markery[i].txt == nazwa)
		{
			markery[i].openInfoWindowHtml(markery[i].txt);
			break;
		}
	}
}

Powyższa funkcja przyjmuje argument w postaci stringa - nazwy markera. Następnie za pomocą pętli for sprawdza markery z tablicy markery, i jeśli nazwa sprawdzanego markera jest równa poszukiwanej, to zostaje otworzone okno informacyjne, a pętla przerwana instrukcją break.

Przykłady zastosowania obu funkcji:

• otworzMarkerPoId(0)
• otworzMarkerPoId(4)
• otworzMarkerPoNazwie('Wolin')
• otworzMarkerPoNazwie('Kozia Wólka')

Przykład użycia linków w tekście dostępny jest tutaj: przykład 4pokaż kod przykładu