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.

Powiększenie okna informacyjnego

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Pojemność "chmurek" InfoWindow i ilość informacji, jakie można w nich wyświetlić jest ograniczona. API posiada rozwiązanie, które w prosty oraz elegancki sposób pozwala na zmaksymalizowanie chmurki po kliknięciu na specjalny przycisk. Dzięki temu, domyślna chmurka może zawierać jedynie podstawowy opis, a całość (zdjęcia, tabelki i inne) dostępna będzie po zmaksymalizowaniu chmurki. Maksymalizacja okienka jest dość nową funkcjonalnością, pamiętaj, by pobierać skrypt API w wersji 2.x (sprawdź kod dowolnego przykładu w tym dziale aby zobaczyć, jak to zrobić).

Wersja prosta - wyświetlenie predefiniowanego tekstu w zmaksymalizowanym oknie

Za pomocą opcjonalnego argumentu w postaci tablicy, przy otwieraniu okna możesz ustawić tekst, który wyświetli się po zmaksymalizowaniu. W tablicy tej wystarczy przypisać kluczowi maxContent rozszerzony tekst, a kluczowie maxTitle tytuł, jaki pojawi się w belce zmaksymalizowanego okienka:

var marker = new GMarker(new GLatLng(49.94694444444445,-40.27444444444444),{title: 'Tu zatonął RMS Titanic'});
marker.text = '<div class="dymek"><strong>RMS Titanic - miejsce zatonięcia</strong>W tym miejscu 15 kwietnia 1912 roku zatonął najbardziej luksusowy parowiec wszechczasów - RMS Titanic</div>';
marker.textMax = '<div class="tekst"><p><strong>RMS</strong> (ang. <em><strong>R</strong>oyal <strong>M</strong>ail <strong>S</strong>teamer</em>) <strong>Titanic</strong> &ndash; brytyjski transatlantyk typu Olympic, należący do towarzystwa okrętowego White Star Line. </p><p>Podczas swojego dziewiczego rejsu z Southampton do Nowego Jorku przez Cherbourg i Queenstown, zderzył się 14 kwietnia 1912 roku z górą lodową i zatonął. Jego katastrofa spowodowała nowelizację praw i zasad bezpieczeństwa morskiego.</p><h3>Siostrzane statki</h3><p>Titanic był jednym z trzech liniowców typu Olympic. Miał dwa siostrzane statki: Olympic i Gigantic (nazwa trzeciego statku została przemianowana po katastrofie Titanica na mniej pretensjonalną &ndash; Britannic). W planach miały być one najbardziej luksusowymi i największymi jednostkami pływającymi na świecie.</p></div>';
GEvent.addListener(marker,'click',function()
{
	marker.openInfoWindowHtml(marker.text,{maxContent: marker.textMax, maxTitle: 'Titanic - poszerzony opis'});
});

I to wszystko, sprawdź działanie powyższego kodu na przykładzie: przykład 1pokaż kod przykładu

Wyświetlenie zawartości pliku

Jeśli na mapie zamierzasz mieć wiele okienek z poszerzoną zawartością, znacznie lepszym rozwiązaniem niż to poprzednie będzie dynamiczne pobieranie pliku i wyświetlanie jego zawartości przy zmaksymalizowaniu okna. Potrzebna będzie strona, zawierająca pewną poszerzoną treść, sformatowaną zgodnie z zasadami języka HTML. Dla potrzeb tego kursu przygotowałem taką oto informację o statku RMS Titanic:

http://gmapsapi.com/examples/012/01/titanic.html

Aby wyświetlić zawartość pliku, skorzystajmy z właściwości, że kluczowi maxContent można przypisać nie tylko tekst (jak w poprzednim przykładzie), ale również odwołanie do obiektu DOM. Stworzymy nowy element DIV, w którym będzie napis "ładowanie". Ten tekst wyświetli się w momencie maksymalizacji okna. Jednocześnie za pomocą znanej już funkcji GDownloadUrl() pobierzemy zawartość pliku z poszerzoną zawartością, i kiedy cały tekst będzie już pobrany wstawimy go zamiast napisu ładowanie.

Nazwa zdarzenia powiększenia okna informacyjnego to maximizeclick, i musimy wprowadzić obsługę tego zdarzenia dla obiektu okna (GInfoWindow():

var marker = new GMarker(new GLatLng(49.94694444444445,-40.27444444444444),{title: 'Tu zatonął RMS Titanic'});
marker.text = '<div class="dymek"><strong>RMS Titanic - miejsce zatonięcia</strong>W tym miejscu 15 kwietnia 1912 roku zatonął najbardziej luksusowy parowiec wszechczasów - RMS Titanic</div>';
GEvent.addListener(marker,'click',function()
{
	zawartosc = document.createElement("div");
	zawartosc.innerHTML = 'Czekaj, trwa wczytywanie...';
	marker.openInfoWindowHtml(marker.text,{maxContent: zawartosc, maxTitle: 'Titanic - poszerzony opis'});
});
var okno = mapa.getInfoWindow();
GEvent.addListener(okno,'maximizeclick',function()
{
	GDownloadUrl('/examples/012/01/titanic.html',function(tekst)
	{
		zawartosc.innerHTML = tekst;
	});
});
mapa.addOverlay(marker);

Zmienna zawartosc musi być globalna! W momencie otwierania okna (linia 8) zamiast rozszerzonej treści przekazujemy element DIV, stworzony dwie linie wcześniej. Potem w linii 10 pobieramy odwołanie do aktualnie otworzonego okna, a następnie prowadzimy obsługę zdarzenia maximizeclick. W razie wystąpienia funkcją GDownloadUrl() pobieramy plik titanic.html, w momencie pobrania podmieniamy zawartość odpowiedniego DIVa.

Działanie tego kodu obrazuje przykład przykład 2pokaż kod przykładu

Własny link do powiększenia okna

Funkcjonalność powiększania dymka jest ciekawa, choć mało intuicyjna - nie każdy może domyślić się, że kliknięcie w plusik pokaże więcej informacji. Nic nie stoi na przeszkodzie, by dodać do okienka własny link, który będzie odpowiadał za jego powiększenie. Wystarczy w powyższym przykładzie zmodyfikować treść otwieranego okna na wzór poniższego kodu:

marker.text = '<div class="dymek"><strong>RMS Titanic - miejsce zatonięcia</strong>W tym miejscu 15 kwietnia 1912 roku zatonął najbardziej luksusowy parowiec wszechczasów - RMS Titanic<a href="#" onclick="mapa.getInfoWindow().maximize(); return false;">pokaż więcej informacji</a></div>';

Zamiana polegała na dodaniu do tekstu hiperłącza, które po kliknięciu wywoła metodę maximize() otwartego okna, do którego odwołanie zwraca metoda getInfoWindow() obiektu mapa. Pamiętaj, że mapa musi być obiektem globalnym!

przykład 3pokaż kod przykładu

Uwagi

Adres URL z zawartością poszerzoną musi prowadzić do pliku na tym samym serwerze. Próba pokazania w okienku pliku z innej strony nie powiedzie się, bo nie pozwalają na to zabezpieczenia przed Cross-Site-Scripting. Jeśli chcesz pobrać zawartość strony spoza Twojego serwera, stwórz skrypt PHP, który będzie pobierał zawartość strony, określonej przez przekazany metodą GET parametr, i jako adres pobieranego pliku przez funkcję GDownladUrl() podaj adres do tego skryptu.

Aby okienka się poprawnie maksymalizowały, musisz użyć wersji API 2.x. Zobacz przykład 12.1, 12.2 lub 12.3, by zobaczyć, jak pobierany jest skrypt API z parametrem &v=2.x

Pytania czytelników

  • Dlaczego następujący kod nie działa?: GEvent.addListener(poly,'click',function(para) { mapa.openInfoWindowHtml(para, {maxUrl:"titanic.html"})});
    MaxUrl jest starym sposobem realizacji tego, co przedstawiono w tym dziale. Zalecam korzystanie z metody z przykładu 12.2. Co do samego kodu - metoda openInfoWindowHtml() obiektu mapy przyjmuje trzy argumenty - pierwszy to punkt, w którym zaczepione zostanie okienko, drugi to tekst do wyświetlenia w markerze, trzeci to opcjonalne parametry. W zacytowanym kodzie brakuje drugiego argumentu. Metoda openInfoWindowHtml() dla obiektu klasy GMarker przyjmuje z kolei tylko dwa argumenty - pierwszy to tekst do wyświetlenia, drugi to opcjonalne argumenty.
  • Jak wstawić w powiększone okienko treść strony spoza innego serwera?
    Musisz napisać specjalny skrypt np. w języku PHP, który pobierze zawartość strony i wyświetli ją na ekranie. Tak przygotowany skrypt umieść na serwerze, nazwę pobieranego pliku przekazuj jako parametr metodą GET. Pomocna w realizacji tego celu może być funkcja fsockopen() języka PHP, której opis wraz z przykładem działania znajdziesz pod tym adresem: php.net/manual/pl/function.fsockopen.php. Pobierając plik po stronie serwera ominiesz ograniczenia, wynikające z zabezpieczeń przed XSS.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Wyświetlanie informacji na mapie

API v2

Kurs podstaw cz. V: Dodawanie tekstu i obrazków w dymkach informacyjnych


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Upiększanie okienka informacyjnego

API v2

Jak za pomocą CSS ulepszyć zawartość okienka informacyjnego?


Dodanie funkcjonalnego paska bocznego

API v2

Poradnik, pokazujący sposób dodania paska bocznego z hiperłączami do markerów