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: przykład 1pokaż kod przykładu

Różna ilość zakładek dla różnych markerów

Prawdopodobnie nie wszystkie markery na Twojej mapie muszą być wyposażone w te same zakładki (lub może wolisz inaczej je nazywać). Przykład 13.2 pokazuje, jak zaimplementować otwieranie różnej ilości zakładek dla różnych markerów: przykład 2pokaż kod przykładu

Zakładki przechowywane są w postaci tablicy dwuwymiarowej - każdy element tablicy jest dwuelementową tablicą, z której pierwszy element to tytuł zakładki, a drugi to jej treść. Taka tablica jest przechowywana we własności .tresc obiektu klasy GMarker. Następnie po kliknięciu nakazujemy uruchomić metodę pokazInfo() klikniętego markera. Ta prototypowana funkcja przetwarza tablicę na tablicę zakładek klasy GInfoWindowTab, a następnie wyświetla okno informacyjne z zakładkami.

Uwagi

  • Przy tworzeniu więcej niż dwóch zakładek, okienko informacyjne jest nieprawidłowo skalowane. Aby naprawić tę niedogodność, otocz treść tagiem div, nadaj mu za pomocą atrybutu CSS szerokość większą niż 90px na każdą zakładkę (czyli dla okna z trzema zakładkami min. 270px). Sprawdź kod przykładu 13.2, aby zobaczyć jak to zrobić.
  • Próba otwarcia okna z jedną zakładką nie powiedzie się - zamiast tego otworzone zostanie zwykłe okno bez zakładek.
  • Jeśli nadal ilość informacji w okienku jest za duża, rozważ skorzystanie z nieudokumentowanego parametru maxUrl, opisanego w jednej z lekcji.

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