Google Maps API – zostań wielkim bratem

W tym numerze prezentujemy podstawy pracy z Google Maps API. W kolejnym przyjrzymy się bardziej zaawansowanym funkcjom. Będziesz zaskoczony, jak wiele potrafi Google Maps API. A więc do dzieła!

Google stworzyło rzecz niebywałą. Google
Maps (http://maps.google.com) to ogólnoświatowy,
cywilny system udostępniający
bardzo precyzyjne zdjęcia satelitarne, mapy
drogowe wraz z mapami miast oraz mnóstwo
naniesionych miejsc i obiektów. Teraz możesz to
wykorzystać na swojej stronie WWW – a wszystko
za sprawą Google Maps API.

Google Maps API (http://www.google.com/apis/maps/) jest zbiorem funkcji JavaScript,
które po załadowaniu na stronę możesz swobodnie
stosować w swoich projektach. System ten
jest stale rozwijany, dodawane są kolejne funkcje
i możliwości. Wszystko to sprawia, że już teraz
możesz dopasować system geolokalizacyjny niemal
całkowicie do własnych potrzeb. Chciałbyś stworzyć
własne zumi.pl? Żaden problem! Nie zajmie ci
to więcej niż pół godziny.

Wstawianie prostej mapy

Na samym wstępie w dokumencie HTML stwórz
warstwę, do której wgrana zostanie mapa:

Zarówno atrybut \”ID\”, jak i szerokość oraz wysokość
mapy mogą być dobrane dowolnie, zgodnie
z twoimi preferencjami. Google Maps dostosuje
wielkość mapy do wielkości warstwy. Także miejsce
lokalizacji warstwy na stronie jest w zasadzie
nieograniczone.

W części HEAD strony musisz załadować odpowiednie
pliki JavaScript z kodem Google Maps API.
Uczynisz to, dodając poniższą linię:

Parametr \”key\” powyższego wywołania
powinien w miejscu \”123456\” zawierać specjalny
kod identyfikacyjny dla twojej witryny. Otrzymasz
go poprzez rejestrację strony w systemie Google
Maps.

Kolejnym krokiem jest stworzenie na potrzeby
twojego serwisu odpowiedniego kodu Java-
Script, który zajmie się komunikacją z serwerami
Google i sterowaniem mapą. Będzie on korzystać
z załadowanego przed momentem Google Maps
API. Dlatego też twój kod nie powinien znaleźć
się przed powyższym odwołaniem do pliku JS
pobranego z serwerów Google. Najlepiej jeśli
swój kod również wyłączysz do osobnego pliku JS.

Umieszczając go bezpośrednio w kodzie HTML (jak
poniżej), musisz pamiętać, że strony budowane
w technologii XHTML wymagają, by kod JS znalazł
się w specjalnej sekcji CDATA.
Przykładowy kod pobierający mapę do warstwy
może wyglądać następująco:

Sercem powyższego kodu jest funkcja {stala}load(){/stala},
w ramach której – po sprawdzeniu kompatybilności
przeglądarki z aktualną wersją Google Maps API
– tworzona jest instancja klasy GMap2. To podstawowa
klasa służąca do zarządzania całą mapą.
Jako parametry konstruktora przekazujesz
referencję do docelowego elementu na stronie
(warstwy), w którym zostanie umieszczona mapa.
Referencja taka jest zwracana przez funkcję
{stala}getElementById(){/stala} zgodnie z podanym identyfikatorem
warstwy. Taki sposób organizacji sprawia,
że możesz tworzyć praktycznie dowolną liczbę
map na stronie. Tworzysz jedynie kolejną warstwę,
nadajesz jej indywidualny identyfikator, a następnie
tworzysz dla niej kolejny obiekt sterujący
– instancję klasy GMap2.

Po dodaniu obiektu powinieneś w pierwszej
kolejności wywołać metodę {stala}setCenter(){/stala}. W powyższym
przykładzie przyjmuje ona dwa parametry:

• punkt na Ziemi, który znajdzie się w centrum
  mapy (obiekt klasy {stala}GLatLng{/stala}) – lokalizacja
  geograficzna punktu na mapie świata. Można
  go wyznaczyć różnymi metodami. Powyżej
  użyliśmy sposobu najprostszego, mianowicie za
  pomocą konstruktora klasy {stala}GLatLng(){/stala} podaliśmy
  koordynaty geograficzne punktu (długość oraz
  szerokość geograficzną).
• opcjonalna wartość przybliżenia (tzw. \”zoomu\”)
  – dla mapy drogowej aktualnie dostępne są
  wartości z przedziału od 0 do 17. Zoom definiuje,
  w jakiej skali zostanie pokazana mapa.
  Liczba 0 to widok całego globu, natomiast 17
  to maksymalne przybliżenie okolicy. W widoku
  satelitarnym można używać wartości do 19,
  jednak nie każdy region obsługuje tak duże
  przybliżenia. Wartości te mogą się zwiększać
  wraz ze wzrostem dokładności systemu Google
  Maps.

Metoda {stala}setCenter(){/stala} może przyjąć jeszcze trzeci
parametr: tryb mapy. Do tego tematu wrócimy
w dalszej części artykułu. Pamiętaj, że metoda {stala}setCenter(){/stala} musi zostać wywołana jako pierwsza po
stworzeniu danego obiektu, zaraz po konstruktorze.
Odpowiada ona za zainicjowanie mapy, a więc
jej brak spowoduje błędne działanie pozostałych
funkcji klasy GMap2.

Zarządzanie kontrolkami

Domyślnie kontrolki pozwalające na sterowanie
mapą przez użytkownika są niedostępne. Możesz
jednak je łatwo dodać:

map.addControl(new GLargeMapControl());

Dostępnych jest kilka wariantów kontrolek:

• {stala}GSmallMapControl(){/stala} – tworzy jedynie ikonki
  do przesuwania mapy oraz przyciski “+/-\” do
  operowania zoomem.
• {stala}GLargeMapControl(){/stala} – mapa będzie zawierać
  elementy takie jak w punkcie poprzednim,
  jednak dodatkowo zostanie ona wyposażona
  w wygodny suwak pozwalający na precyzyjne
  ustawienie zoomu oraz w ikonkę \”wycentrowania\”, która z dowolnego miejsca przenosi widok
  mapy do ustawionej na początku lokalizacji
  domyślnej.
• {stala}GSmallZoomControl(){/stala} – zawiera wyłącznie ikonę
  “+/-\” do operowania zoomem.
• {stala}GScaleControl(){/stala} – wyświetla skalę.
• {stala}GMapTypeControl(){/stala} – dodatkowa kontrolka
  pozwalająca użytkownikowi na przełączanie rodzaju
  mapy (mapa drogowa, zdjęcia satelitarne
  i tryb hybrydowy).
• {stala}GOverviewMapControl(){/stala} – po dodaniu tej ikonki
  w prawym dolnym rogu pojawi się mapa okolicy
  w sporym oddaleniu. Aktualny wycinek tej
  mapy widoczny w powiększeniu jest oznaczony
  prostokątem.

Geolokalizacja na podstawie adresu

Tworząc pierwszą mapę, operowaliśmy wprost
na wartościach geograficznych – podane zostały
precyzyjne współrzędne punktu. Taki sposób
wyznaczania obiektów na mapie nie jest zbyt
wygodny. Na szczęście Google Maps oferuje
znacznie ciekawsze sposoby wyznaczania punktów
na mapie – bazując na adresie lub nawet nazwach
miejsc i obiektów.

Zespół Google zadbał o to, aby
dostępne były nazwy miejscowości, a nawet ulic
czy wręcz dokładna numeracja bloków (w większych
miejscowościach). Często także ważniejsze
obiekty są dodatkowo oznaczane. Cała ta funkcjonalność
jest do twojej dyspozycji.

Pierwsze pytanie, jakie przychodzi na myśl,
to zapewne, w jaki sposób można otrzymać
z systemu Google Maps wartości geograficzne
dowolnego punktu na świecie? Taka możliwość
przyda się zapewne nie tylko przy tworzeniu map
internetowych.

Odpowiedź jest prosta – wystarczy wywołać
specjalne zapytanie HTTP, przekazując określone
parametry metodą GET. Oto prosty przykład:

http://maps.google.com/maps/geo?q=Rynek+Glowny,+Kraków,+PL&output=xml&key=123456

Powyżej przekazanych zostało kilka parametrów:

• q – zawiera właściwą treść zapytania, czyli wyszukiwany
  adres. Po przecinkach podawane są
  kolejno rozmaite informacje precyzujące punkt,
  aby nie było wieloznaczności. Jest to dokładny
  adres w danym mieście, następnie nazwa
  miejscowości i skrót nazwy kraju. Gwarantuje to poprawne odnalezienie informacji. Należy
  pamiętać, że dane muszą zostać przekazane
  zgodnie ze standardowym kodowaniem parametrów
  HTTP.
• {stala}output{/stala} – określa format zwróconych danych.
  Do wyboru są: XML, KML, JSON oraz CVS. Ten
  ostatni jest najłatwiejszy do parsowania, ale
  zawiera tylko kilka najbardziej istotnych detali ze
  zwróconego wyniku. JSON to metoda przesyłania
  danych dedykowana dla JavaScript. XML
  jest z kolei standardowym formatem wymiany
  danych, którego nie trzeba chyba nikomu przybliżać.
  Natomiast KML to standard Google oraz
  NASA do wymiany danych geolokalizacyjnych,
  bazujący na XML.
• {stala}key{/stala} – klucz (identyfikator) twojej witryny w systemie
  Google Maps. Identyczny z kluczem wygenerowanym
  na potrzeby wstawiania mapy na stronę.

Dołączony poniżej listing pokazuje wynik
zwrócony przez powyższe zapytanie. Istotny dla
celów geolokalizacyjnych jest podelement \”coordinates\”
w ramach elementu \”Point\” – wskazuje on
współrzędne geograficzne odnalezionego miejsca.
Co ciekawe, współrzędne podawane są w odwrotnej
kolejności, niż wymaga tego konstruktor klasy
GlatLng. Warto o tym pamiętać.

Mapa przedstawiająca rzeczywisty adres

Czas wykorzystać geolokalizację w praktyce.
Dodamy ten mechanizm do przykładowego skryptu
tworzącego mapę.

Kod ten prezentuje ten sam wynik co jego
poprzednia wersja, w nieco tylko większym
oddaleniu. Dla zachowania przejrzystości obsługa
geodekodowania została wyłączona do osobnej
funkcji {stala}showAddress(){/stala}. Funkcja zawiera także
prostą obsługę błędu nieodnalezienia punktu na
podstawie podanego adresu.

Wykorzystywana jest tutaj metoda {stala}getLatLng(){/stala}
obiektu {stala}GClinetGeocoder{/stala}. Musisz przekazać do tej
metody dwa parametry – łańcuch z wyszukiwanym
adresem oraz funkcję, która zostanie wywołana po
zakończeniu dekodowania adresu. Google Maps
API przekaże do tej funkcji odnaleziony punkt
{stala}GLatLng{/stala} jako parametr. Pozwala to na niemal
dowolne obsłużenie wyświetlenia tego punktu.
W dalszej części artykułu poznasz jeszcze wiele
przykładów na to, do czego może się przydać
obiekt klasy {stala}GLatLng{/stala}. Metoda {stala}getLatLng(){/stala} nie
zwraca żadnej wartości.

Adresy mogą być konstruowane według różnorodnych
schematów. Oto kilka przykładów:

showAddress(\"Złota 59, Warszawa, PL\");

Jest to najczęściej stosowane wyszukiwanie
obiektu według adresu. Precyzyjna numeracja
budynków zadziała tylko w większych miejscowościach.

showAddress(\"Browar, Tychy, PL\");

Jak widać na powyższym przykładzie, możesz
również wyszukiwać nazwane obiekty. Google
Maps posiada zapamiętanych wiele istotnych
miejsc nie tylko w miastach, ale i całych regionach.
Nie muszą być to tylko obiekty, których opisy są
widoczne bezpośrednio na mapie.

showAddress(\"Spodek, PL\");
showAddress(\"Stadion Slaski, PL\");

Jak widać w przypadku charakterystycznych
w skali całego kraju obiektów, podawanie nazwy
miejscowości w ogóle nie jest konieczne.

showAddress(\"Jezioro Niegocin, PL\");

Odnalezienie jeziora to również żaden problem
dla Wielkiego Brata Google.

showAddress(\"Hel, PL\");

W ten równie prosty sposób wyświetlona
zostanie cała miejscowość.

Zaznaczanie punktu na mapie

Dzięki Google Maps będziesz mógł nie tylko
wyświetlić na mapie rozmaite miejsca, ale także
precyzyjnie je wskazać, a następnie opisać.

Na
tworzenie wirtualnych \”pinezek\”, wpiętych w określonych
punktach mapy, pozwala klasa GMarker.
Zobacz, jak to działa: funkcja {stala}showAddress(){/stala}
została rozszerzona o zaznaczenie markerem
wyszukanego adresu:

function showAddress(address) {
  geocoder.getLatLng(
    address, function(point) {
      if (!point) {
        alert(address + \" not found\");
      } else {
        map.setCenter(point, 15);
        var marker = new GMarker(point);
        map.addOverlay(marker);
      }
    }
  );
}

W powyższym przykładzie tworzona jest instancja
klasy GMarker. Klasa ta dziedziczy po {stala}GOverlay{/stala},
co jest istotne, ponieważ \”pinezkę\” umieścimy
na mapie, korzystając z metody {stala}addOverlay(){/stala},
dostępnej w ramach klasy GMap2. Jako parametr
konstruktora klasy GMarker przekazujesz obiekt
klasy {stala}GLatLng{/stala}, czyli geograficzne wskazanie miejsca
wstawienia punktu (obiekt ten już znasz, został
zwrócony chociażby przez funkcję geolokalizującą).

Na potrzeby kolejnych przykładów użyj następującego
wywołania, które zaprezentuje na mapie
Synagogę Izaaka, jeden z zabytków krakowskiej
dzielnicy Kazimierz:

showAddress(\"Synagoga Izaaka, Krakow, PL\");

Stworzoną \”pinezkę\” możesz nieco dostosować
do swoich potrzeb – przede wszystkim zmieniając
jej ikonkę (co oznacza w istocie zmianę jej wyglądu).
Uczynisz to, przekazując do konstruktora klasy
GMarker dodatkowy parametr klasy {stala}GMarkerOptions{/stala}.
Ta ostatnia klasa zawiera właściwość icon,
którą możesz zdefiniować, tworząc obiekt klasy
GIcon. Przykład:

map.setCenter(point, 16);
var iconObj = new Gicon();
// Sciezka do ikonki
iconObj.image = \"muzeum.png\";
// Rozmiar ikonki
iconObj.iconSize = new GSize(20, 20);
// Przesuniecie ikony wzgledem punktu (na srodku)
iconObj.iconAnchor = new GPoint(10, 10);
// Przesuniecie opisu do punktu
iconObj.infoWindowAnchor = new GPoint(5,1);
var marker = new GMarker(point, {icon:iconObj} );
map.addOverlay(marker);

Z modyfikacjami wyglądu możesz pójść znacznie
dalej. Na przykład możesz dodać do ikonek cienie,
co daje pewne wrażenie trójwymiarowości. Cienie
zdefiniujesz za pomocą właściwości shadow oraz
{stala}shadowSize{/stala}. Możesz ponadto ustanowić alternatywne
ikony, które zostaną wykorzystane w wersji
mapy na potrzeby wydruku. Pełną listę właściwości
znajdziesz w dokumentacji Google Maps API.

Na potrzeby powyższego przykładu zarządzanie
punktami zostało wyłączone z funkcji {stala}showAddress(){/stala}
do funkcji {stala}showMarker(){/stala}. Ta specjalizacja
zadań sprawia, że {stala}showAddress(){/stala} jedynie ustawia
mapę w odpowiednim miejscu, z kolei {stala}showMarker(){/stala}
odpowiada za nanoszenie na mapę kolejnych
punktów. Zwróć również uwagę, że jako drugi
parametr funkcji {stala}showAddress(){/stala} przekazywana jest
wartość przybliżenia (zoomu):

function showAddress(address, zoom) {
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert(address + \" not found\");
      } else {
        // Ustawianie miejsca
        map.setCenter(point, zoom);
        // Kontrolki sterujace mapa
        map.addControl(new GLargeMapControl());
        map.addControl(new GoverviewMapControl());
        markerManager = new GmarkerManager(map);
      }
    }
  );
}

W ramach konstruowanej mapy użyte zostały
dwie kontrolki – {stala}GLargeMapControl{/stala} oraz {stala}GOverviewMapControl{/stala}.
Pozwoli to użytkownikowi na
precyzyjne sterowanie dokładnością mapy, a także
wyświetli mapkę okolicy w prawym dolnym rogu.

function showMarker(address, text, minZoom,maxZoom) {
  geocoder.getLatLng( address, function(point) {
    if (!point) {
      alert(address + \" not found\");
    } else {
      // Tworzenie markera
      var marker = new GMarker(point);
      // Dodanie markera do kolekcji
      markerManager.addMarker(marker, minZoom,maxZoom);
      // Odswiezanie
      markerManager.refresh();
      // Dolaczanie informacji dostepnej po kliknieciu
      marker.bindInfoWindowHtml(text);
    }
  }
);

Zwróć jeszcze na moment uwagę na zawartość
funkcji {stala}load(){/stala}. Mapa została zorganizowana w taki
sposób, aby poszczególne punkty wyświetlane były
w zależności od aktualnego poziomu przybliżenia.
Oddalając się, zobaczysz jedynie pinezkę prezentującą
dzielnicę Kazimierz. Gdy przybliżysz się nieco
bardziej – wyświetlone zostaną poszczególne
obiekty w ramach tej dzielnicy.

Obsługa zdarzeń

Google Maps wyposażone zostało w obsługę
rozmaitych zdarzeń. Możesz między innymi obsłużyć
kliknięcie na poszczególnych elementach, załadowanie
mapy, najechanie na dowolny marker czy
zmianę typu mapy. A to tylko wybrane możliwości.
Niemal każda klasa posiada własne zdarzenia – ich
szczegółową listę odnajdziesz w dokumentacji.
Zdarzeniami można zarządzać za pomocą klasy
{stala}GEvents{/stala}, przede wszystkim poprzez jej metodę
{stala}addListener(){/stala}.

Poniżej pokazano, w jaki sposób możesz dodać
zdarzenie do swojej mapy. Dołączymy do mapy
zdarzenie kliknięcia na ikonkę symbolizującą
marker. Zrealizujemy to w taki sposób, aby będąc
w widoku oddalonym, po kliknięciu markera
użytkownik został przeniesiony do widoku przybliżonego.
Co oczywiście spowoduje automatyczne
oznaczenie kolejnymi pinezkami znajdujących się
tam obiektów sakralnych.

function showMarkerWithEvent(address, minZoom, maxZoom, listener) {
  geocoder.getLatLng(
    address, function(point) {
      if (!point) {
        alert(address + \" not found\");
      } else {
        // Tworzenie markera
        var marker = new GMarker(point);
        // Dodanie markera do kolekcji
        markerManager.addMarker(marker, minZoom, maxZoom);
        // Odswiezanie
        markerManager.refresh();
        // Obsluga zdarzenia \"click\"
        GEvent.addListener(marker, \"click\", listener);
      }
    }
  );
}

Dodana została nowa funkcja showMarker-
{stala}WithEvent(){/stala}. Jej działanie jest zbliżone do funkcji
{stala}showMarker(){/stala} z tą różnicą, że po kliknięciu nie
otworzy się okienko informacyjne. Zamiast niego
wywołana zostanie funkcja przekazana w parametrze
listener – powiązana ze zdarzeniem \”click\”.

Oto sposób stworzenia funkcji obsługi zdarzenia
oraz przekazania jej do {stala}showMarkerWithEvent():{/stala}

var listener = function() {
  showAddress (\"Estery, Krakow, PL\", 15);
};
showMarkerWithEvent(\"Kazimierz, Krakow, PL\", 0, 14, listener);

Najpierw zdefiniowana została funkcja, którą
Google Maps API wykona w momencie wyzwolenia
zdarzenia \”click\” na markerze. Następnie
funkcja ta została przekazana jako parametr.
Spróbuj uruchomić mapę i zwiększyć oddalenie.
Gdy klikniesz na pinezce symbolizującej dzielnicę
Kazimierz, zostaniesz przeniesiony do widoku tej
dzielnicy, w większym przybliżeniu i z uwzględnieniem
bardziej drobiazgowych markerów. I o to
chodziło!

Warto w tym miejscu dodać, iż zdarzenia
pozwalają również na łatwą integrację mapy
z pozostałą częścią witryny. Dla przykładu, nie jest
trudnym zadaniem stworzenie funkcji, która dla
określonego zdarzenia (np. najechanie na wybrany
marker) wyświetli na wcześniej przygotowanej
warstwie na stronie określone informacje. A to
tylko jeden z przykładów zastosowania zdarzeń…

Zmiana rodzaju mapy

Jeżeli miałeś kiedykolwiek styczność z serwisem
Google Maps, wiesz, że udostępnia on trzy tryby
oglądania świata. Do wyboru jest mapa drogowa,
widok satelitarny oraz mapa hybrydowa, stanowiąca
obraz z satelity z nałożoną nań siatką dróg
i obiektów. Google Maps API pozwala w łatwy
sposób zdefiniować sposób wyświetlania twojej
mapy:

map.setCenter(point, 18, G_SATELLITE_MAP);

Trzeci, opcjonalny parametr znanej ci już metody
{stala}setCenter(){/stala}, pozwala na określenie typu mapy
do wyświetlenia. Do wyboru są trzy możliwości:

G_NORMAL_MAP, G_SATELLITE_MAP oraz G_HYBRID_MAP.

Korzystając z tej właściwości, zmodyfikujemy
nasz wirtualny przewodnik po dzielnicy Kazimierz
w taki sposób, aby po kliknięciu na markerze
przedstawiającym obiekty sakralne użytkownik był
przenoszony do widoku satelitarnego z maksymalnym
przybliżeniem (dla tego regionu ma ono
wartość 18). Dymek z opisem będzie natomiast
prezentowany po najechaniu myszką na obiekt.
Czynności te wymają zmodyfikowania funkcji
{stala}showMarker(){/stala}.

function showMarker(address, text, minZoom, maxZoom) {
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert(address + \" not found\");
      } else {
        // Tworzenie markera
        var marker = new GMarker(point);
        // Dodanie markera do kolekcji
        markerManager.addMarker(marker, minZoom, maxZoom);
        // Odswiezanie
        markerManager.refresh();
        // Obsluga najechania myszka
        var listenerMouseOver = function() {
          // Wyswietlamy okienko informacyjne
          marker.openInfoWindowHtml(text);
        };
        GEvent.addListener(marker, \"mouseover\", listenerMouseOver);
        // Obsluga opuszczenia elementu przez myszke
        var listenerMouseOut = function() {
          // Zamkniecie okienka informacyjnego
          marker.closeInfoWindow();
        };
        GEvent.addListener(marker, \"mouseout\", listenerMouseOut);
        // Obsluga klikniecia
        var listenerClick = function() {
          // Przejscie do trybu satelitarnego i przyblizenie
          map.setCenter(point, 18, G_SATELLITE_MAP);
        };
        GEvent.addListener(marker, \"click\",listenerClick);
      }
    }
  );
}

Funkcja {stala}showMarker(){/stala} została rozszerzona
o kilka dodatkowych zdarzeń (kliknięcie w marker,
najechanie na niego myszką oraz opuszczenie
przez kursor myszki obszaru markera). W praktyce
należałoby dopracować użytą tutaj funkcjonalność.
Nam jednak chodziło głównie o zaprezentowanie
dynamicznej zmiany typów mapy i do tego celu
przykład jest wystarczający.

To dopiero początek zabawy…

W artykule przedstawionych zostało kilka podstawowych
funkcji, z których możesz skorzystać
dzięki Google Maps API. Już na tym etapie widać,
że jest to potężne narzędzie, które daje webmasterowi
ogromne możliwości w zakresie dostosowania
mapy do swoich potrzeb.

Google Maps nadaje się zarówno do tworzenia prostych map dojazdu
do firmy, jak i – przy pewnej dozie samozaparcia
– do budowania rozbudowanych systemów geoinformatycznych.
Nie są to jednak jeszcze wszystkie funkcje udostępnione
przez developerów Google. Te bardziej
zaawansowane zostaną przedstawione w kolejnym
artykule.

Okna informacyjne

Każdy z markerów możesz opisać. Powstaną
w ten sposób charakterystyczne dymki, nazywane
w terminologii Google Maps oknami informacyjnymi.
Najprostsza metoda, która realizuje wyświetlenie
dymku, wygląda następująco:

marker.openInfoWindow(\"Synagoga Izaaka\");

Stworzona w ten sposób informacja nie
prezentuje się jednak zbyt okazale. Na szczęście
twórcy Google udostępnili możliwość wpływania
na wygląd opisu. Najlepsze efekty daje zastosowanie
formatowania HTML. Wystarczy, że w ostatnim
przykładzie zamienisz metodę {stala}openInfoWindow(){/stala}
na pokrewną {stala}openInfoWindowHtml(){/stala}. Jako
parametr przekazujesz wówczas kod HTML, który
wstawiony zostanie do dymku.

W tym miejscu konieczne jest dodanie małej
uwagi. Pamiętaj o tym, że Google Maps używa
kodowania UTF8 – powinno ono zostać użyte także
do wstawiania polskich znaków.
Przykład zastosowania okienka informacyjnego
z kodowaniem HTML:

marker.openInfoWindowHtml(\'
Synagoga powstala w 1644 roku. Znaduje sie w krakowskiej dzielnicy Kazimierz.
\');

Jeśli chciałbyś przekazać więcej informacji, unikając jednocześnie zbyt mocnego powiększania
samego dymka, możesz zastosować zintegrowany
mechanizm zakładek.

var tabs = [new GInfoWindowTab(\"Zakladka 1\", \"Tresczakladki 1\"),new GInfoWindowTab(\"Zakladka 2\", \"Tresczakladki 2\")];
marker.openInfoWindowTabsHtml(tabs);

Jak widać, zakładki możesz wykorzystać
w okienku informacyjnym, tworząc tablicę
obiektów typu {stala}GinfoWindowTab{/stala}. Jako parametry
przekazujesz kolejno widoczną nazwę zakładki
oraz jej treść.

Zauważ, że utworzyliśmy dymek, korzystając
z metody {stala}openInfoWindowTabsHtml(){/stala}. To kolejny
sposób prezentacji danych. Oto podsumowanie
wszystkich dostępnych:

• {stala}openInfoWindow{/stala} – najprostszy sposób wyświetlenia
  informacji. Wykorzystuje czysty tekst bez
  formatowania.
• {stala}openInfoWindowHtml {/stala}- pozwala stosować
  formatowanie HTML oraz dołączać rozmaite
  elementy przewidziane w specyfikacji HTML (np.
  obrazki, hiperłącza).
• {stala}openInfoWindowTabs{/stala} – tworzenie zakładek
  formatowanych czystym tekstem. Jako parametr
  należy podać tablicę elementów klasy {stala}GinfoWindowTab{/stala}.
• {stala}openInfoWindowTabsHtml{/stala} – działanie tej metody
  jest analogiczne do poprzedniej. Również
  pozwala tworzyć zakładki, jednakże ich treść jest
  formatowana.

Powyższe metody spowodują wyświetlenie
informacji natychmiast po otwarciu mapy. Dymek
zostanie jednak zamknięty, gdy klikniesz w ikonkę
znajdującą się w jego prawym górnym rogu. Jeśli
chcesz, aby istniała możliwość otwarcia informacji
po kliknięciu na ikonkę symbolizującą marker,
powinieneś użyć następujących metod: {stala}bindInfoWindow(){/stala}, {stala}bindInfoWindowHtml(){/stala}, {stala}bindInfoWindowTabs(){/stala}
oraz {stala}bindInfoWindowTabsHtml(){/stala}.

Metody te możesz stosować równolegle
z opisanymi poprzednio (wówczas okienko pojawi
się zarówno po starcie mapy, jak i po każdorazowym
kliknięciu pinezki) i niezależnie – w takim
przypadku opis punktu nie będzie uruchamiany
automatycznie po starcie mapy.

Tworzenie zbioru punktów

Jeśli na jednej mapie ma pojawić się więcej niż
jeden punkt, powinieneś stworzyć zbiór markerów.
Możliwość taką udostępnia klasa zarządzająca
markerami – {stala}GMarkerManager{/stala}. Jako parametr konstruktora
musisz przekazać referencję do aktualnie
modyfikowanej mapy:

var markerManager = new GMarkerManager(map);

Punkty na mapie możesz dodać, korzystając
z metody {stala}addMarker(){/stala}. W wersji podstawowej
metoda ta przyjmuje dwa wymagane parametry
– obiekt typu {stala}GMarker{/stala} oraz liczbę całkowitą,
prezentującą dolną wartość poziomu przybliżenia
mapy, przy którym punkt ten będzie wyświetlany
(przestanie być wyświetlany, gdy oddalimy się
ponad wartość graniczną zoomu).

To bardzo praktyczna opcja, bowiem przy większym
zagęszczeniu informacji na mapie wraz z oddalaniem
widoku obserwowany będzie efekt nakładania
się rozmaitych markerów na siebie. Podanie wartości
granicznej pozwala tego efektu uniknąć.
Jako parametr opcjonalny możesz zastosować
również górną wartość graniczną dla przybliżenia
(w tym przypadku punkt nie będzie wyświetlany,
jeśli nadmiernie zwiększysz dokładność mapy).

Jeśli parametr ten nie zostanie przekazany, jako
wartość maksymalną system zastosuje największe
przybliżenie obsługiwane w danym momencie
przez Google Maps (aktualnie będzie to wartość 17
dla mapy drogowej).

Po każdorazowym dodaniu kolejnego punktu,
ale przed dołączeniem opisu, musisz wywołać
metodę {stala}refresh(){/stala} klasy GMarkerManager w celu
naniesienia zmian na mapę.

Jeśli chcesz dodać jednorazowo większą ilość
pinezek, możesz wielokrotnie wywoływać metodę
{stala}addMarker(){/stala} dla każdej z osobna lub zastosować
metodę {stala}addMarkers(){/stala}. Działa ona analogicznie do
poprzedniej, z tą różnicą, że w pierwszym parametrze
przekazujesz tablicę markerów.

Oto przykład tworzenia zbioru punktów:

function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById(\"map\"));
    geocoder = new GClientGeocoder();
    // Ustawienie mapy na dzielnice Kazimierz
    showAddress(\"Estery, Krakow, PL\", 15);
    // Zoom <15, 17> - szczegolowe punkty dla przyblizenia
    showMarker(\"Synagoga Izaaka, Krakow, PL\", \"Synagoga Izaaka\", 15, 17);
    showMarker(\"Synagoga Stara, Krakow, PL\", \"Synagoga Stara\", 15, 17);
    showMarker(\"Synagoga Wysoka, Krakow, PL\", \"Synagoga Wysoka\", 15, 17);
    showMarker(\"Synagoga Tempel, Krakow, PL\", \"Synagoga Stara\", 15, 17);
    showMarker(\"Synagoga Poppera, Krakow, PL\", \"Synagoga Poppera\", 15, 17);
    showMarker(\"Synagoga Remuh, Krakow, PL\", \"Synagoga Remuh\", 15, 17);
    showMarker(\"Kosciol Bozego Ciala, Krakow, PL\", \"Kosciol Bozego Ciala\", 15, 17);
    showMarker(\"Kosciol Sw. Katarzyny, Krakow, PL\", \"Kosciol Sw. Katarzyny\", 15, 17);
    showMarker(\"Kosciol na Skalce, Krakow, PL\", \"Kosciol na Skalce\", 15, 17);
    // Zoom <0, 14> - wyswietlenie ogolnego oznaczenia dzielnicy
    showMarker(\"Kazimierz, Krakow, PL\",\"Kazimierz\", 0, 14);
  }
}