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.

Zakładki w oknach informacyjnych

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Dotychczas w mapach stosowaliśmy dymki informacyjne, które miały ograniczoną pojemność na teksty i obrazki. Jeśli chcesz pokazać więcej oglądajęcemu serwis, lub też wolisz podzielić prezentowane dane na logiczne sekcje, możesz użyć oferowanego przez API rozwiązania, polegającego na dodaniu zakładek do okna informacyjnego.

Jak zrobić zakładki?

Schemat tworzenia markera jest identyczny. Zmieni się natomiast funkcja do otwierania okna informacyjnego. Dotychczas była to openInfoWindowHtml() - teraz będziemy stosować podobnie brzmiącą funkcję openInfoWindowTabsHtml().

Funkcja openInfoWindowTabsHtml(), implementowana przez klasę GMap2 przyjmuje dwa argumenty - punkt klasy GLatLng oraz tablicę z danymi o zakładkach. Z kolei funkcja o tej samej nazwie, implementowana przez klasę GMarker przyjmuje tylko jeden argument w postaci tablicy z danymi o zakładkach.

Każda zakładka reprezentowana jest przez obiekt klasy GInfoWindowTab. Przy jego tworzeniu podajemy dwa argumenty - tekst, który wyświetli się na zakładce, oraz tekst, który będzie widoczny po kliknięciu na zakładkę:

var zakladka = new GInfoWindowTab('Tytuł zakładki','Treść zakładki');

Tak utworzone zakładki gromadzimy w jednej tablicy, którą przekazujemy jako parametr w sposób następujący:

var zawartosc1 = new GInfoWindowTab('Tytuł #1','Zawartość #1');
var zawartosc2 = new GInfoWindowTab('Tytuł #2','Zawartość #2');
marker.openInfoWindowTabsHtml([zawartosc1,zawartosc2]);

I to tyle, o resztę zadba API. Sprawdź przykład 13.1, który pokazuje wygląd zakładek: