Minimapa zagnieżdżona w oknie InfoWindow

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:
- brak możliwości szerszej konfiguracji wyświetlanej minimapy
- 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