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: