Poznaj Google Maps API

Minimapa zagnieżdżona w oknie InfoWindow

« powrót do listy poradników

W piątej części kursu podstaw pokazane zostało, jak otworzyć okno z miniaturką mapy (tzw. blow-up). Rozwiązanie to było proste, ale posiadało dwie zasadnicze wady:

1. brak możliwości szerszej konfiguracji wyświetlanej minimapy
2. brak możliwości otworzenia mapy w zakładce (za pomocą metody openInfoWindowTabsHtml()

W tym poradniku rozwiążemy oba powyższe problemy, tworząc własną osadzoną minimapę.

Imitacja blow-upa

Minimapa, otwierana w oknie InfoWindow będzie w rzeczywistości nowym obiektem GMap2, wycentrowanym w odpowiednim punkcie za pomocą metody setCenter(). W poniższym listingu pokazałem sposób na stworzenie obiektu DOM z mapą, a następnie na wyświetleniu okna z minimapą:

var minimapa = document.createElement('div');
minimapa.id = 'minimapa';
var mapa;

Stworzyliśmy obiekt blokowy div, któremu przypisaliśmy id minimapa. Markery będziemy dodawać funkcją dodajMarker(), wyglądającą następująco:

function dodajMarker(punkt)
{
	var marker = new GMarker(punkt);
	mapa.addOverlay(marker);
	GEvent.addListener(marker,'click',function()
	{
		var div = document.createElement('div');
		div.className = 'dymek';
		div.appendChild(minimapa);
		var mapa2 = new GMap2(minimapa,{size:new GSize(200,200)});
		mapa2.setCenter(marker.getPoint(),16,G_NORMAL_MAP);
		marker.openInfoWindow(div);
	});
	return marker;
}

Najważniejszą rzeczą jest obsługa kliknięcia na marker. Najpierw w linii 7 tworzymy nowy element blokowy div, o nazwie klasy CSS dymek. W kolejej linii zagnieżdżamy w nim utworzoną na początku minimapę. Potem tworzymy nową mapę GMap2, osadzoną w obiekcie minimapa. W linii 11 centrujemy ją na współrzędnych środka klikniętego markera, a następnie otwieramy okienko informacyjne z wygenerowaną zawartością. Zwróć uwagę, że metoda openInfoWindow() jako argument przyjmuje odwołanie do obiektu w strukturze DOM, w przeciwieństwie do openInfoWindowHTML(), która przyjmuje kod HTML.

W tym przykładzie przy konstrukcji mapy GMap2 podałem opcjonalny drugi parametr, dzięki któremu mogłem przekazać docelowy rozmiar minimapy (200x200). Dzięki takiemu zabiegowi, API "wie", jakie są wymiary mapy, i może poprawnie obliczyć miejsce jej wycentrowania.

Pozostała odrobina kodu CSS w celu odpowiedniego stylowania:

.dymek
{
	width: 212px;
	height: 212px;
	margin: 0;
}

#minimapa
{
	margin: 3px;
	padding: 2px;
	border: 1px solid gray;
	width: 200px;
	height: 200px;
}

Oto efekt: przykład 1pokaż kod przykładu

Wystające prawa autorskie

W przykładzie 25.1 w oczy kłują wystające poza obszar mapy prawa autorskie. Można to rozwiązać na dwa sposoby:

Przycięcie praw

Prosta metoda, polega na ustawieniu w kodzie CSS overflow: hidden; dla elementu minimapy - wówczas napisy będą przycinane, by nie wychodzić poza obszar mapy. Ta metoda jest w pełni zgodna z zasadmi użycia API. Oto wygląd: przykład 2pokaż kod przykładu

Usunięcie praw autorskich

Ta metoda jest bardziej przyjemna dla oka, gdyż oczyszcza zupełnie minimapę z praw autorskich, co jest istotne n.p. gdy rozmiary minimapy są niewielkie. Trzeba jednak rozważyć kwestie legalności rozwiązania - usuwanie informacji o prawach autorskich jest w gruncie rzeczy sprzeczne z warunkami użycia API. Moją propozycją na obejście tego przepisu jest otwieranie minimapy w tym samym trybie wyświetlania, co mapa główna (np. jeśli podczas klikania na marker trybem mapy była hybryda, to i minimapa powinna zostać otworzona w tym trybie - wówczas przedstawia te same zdjęcia co mapa główna, a prawa autorskie wyświetlane są na mapie głównej.

Jak usunąć informacje o prawach autorskich? To proste, wystarczy dodać dwie linijki, dodane za inicjalizacją mapy:

minimapa.firstChild.nextSibling.style.display = 'none';
minimapa.firstChild.nextSibling.nextSibling.style.display = 'none';

(minimapa to element div z mapą, szczegóły w kodzie źródłowym przykładu 25.3). Zwróć uwagę na kod, dzięki któremu mapa wyświetlana jest w identycznym trybie co mapa główna:

mapa2.setCenter(marker.getPoint(),16,mapa.getCurrentMapType());

Oto rezultat działania po usunięciu praw autorskich: przykład 3pokaż kod przykładu

Otwieranie minimapy w zakładce

Korzystając z kursu Debugowanie skryptów dla początkujących oraz z informacji, zawartych w tym dziale powinieneś być w stanie napisać aplikację, która wyświetli minimapę w jednej z zakładek. Oto przykład:

GEvent.addListener(marker,'click',function()
{
	var div1 = document.createElement('div');
	div1.className = 'dymek';
	var div2 = document.createElement('div');
	div2.className = 'dymek';
	div1.appendChild(document.createTextNode('Kliknij na zakładkę MINIMAPA, by pokazać minimapę'));
	div2.appendChild(minimapa);
	var mapa2 = new GMap2(minimapa);
	minimapa.firstChild.nextSibling.style.display = 'none';
	minimapa.firstChild.nextSibling.nextSibling.style.display = 'none';
	mapa2.setCenter(marker.getPoint(),16,G_NORMAL_MAP);
	marker.openInfoWindowTabs([new GInfoWindowTab('marker',div1),new GInfoWindowTab('minimapa',div2)]);
});

Jedyna różnica polega na tym, że tworzymy dwa zewnętrzne divy, w jednym osadzamy mapę a w drugim jakiś tekst, następnie otwieramy okno z zakładkami (przedostatnia linia), gdzie pierwszej zakładce przypisana jest nazwa "marker" i div1, a drugiej nazwa "minimapa" i div2 wraz z zagnieżdżoną mapą. A oto efekt: przykład 4pokaż kod przykładu

W pełni statyczna mapa

Google udostępnia API do generowania statycznych obrazków z mapą. Ta możliwość została omówiona szerzej w tym dziale, nic nie stoi na przeszkodzie by wstawić statyczny obrazek do zakładki okna, co pokazuje poniższy przykład: przykład 5pokaż kod przykładu