Google Maps na własnej witrynie

Google Maps to pierwsza w pełni interaktywna internetowa mapa Ziemi. Ta niewątpliwie rewolucyjna usługa łączy możliwości zdjęć satelitarnych i tradycyjnej mapy kartograficznej. Udostępniane przez Google narzędzie Maps API pozwala na bezpłatnie umieszczenie mapy Google na własnej witrynie. Pokażę jak szybko stworzyć atrakcyjną mapę dojazdową w dziale Kontakt firmowej witryny.

Google Maps to bezpłatna, wolna od reklam
internetowa mapa świata, dostępna w sieci pod adresem http://maps.google.com. Powstała na początku 2005 roku,
wprowadzając nowy sposób prezentacji map. Wszystkie dotychczasowe rozwiązania internetowe
dawały możliwość powiększenia określonego obszaru w bardzo ograniczonym zakresie. Każda operacja, taka jak zbliżenie, czy
przesunięcie mapy, pociągała za sobą konieczność
odczekiwania na przeładowanie strony.

W Google Maps wszystkie te niedogodności zostały usunięte. Nawigacja w obrębie mapy Google opiera się na wykorzystaniu myszy do przeciągania i powiększania dowolnych fragmentów
globu w niemal płynny sposób. Większość współczesnych myszek wyposażonych jest w kółko służące do szybkiego przewijania
stron WWW i dokumentów.

To samo kółko wykorzystuje się do szybkiego powiększenia
lub pomniejszenia mapy. Ponieważ Google
korzysta z techniki AJAX, wyświetlenie nowej porcji mapy lub pokazanie większych
szczegółów nie wymaga przeładowania strony, a wyłącznie odczekania kilku chwil na załadowanie
nowych fragmentów. Płynność wczytywania map jest tym większa, im szybszym
łączem dysponuje użytkownik.

Zaletą Google Maps jest zarówno bezpłatny
charakter tego rozwiązania (za dowolną
automapę trzeba zapłacić nierzadko setki złotych),
a także jego dostępność. Wszędzie tam,
gdzie jest internet, jest Google Maps.
Główną bolączką map komputerowych pochodzących
z lat 90. była nieobecność średniej
wagi dróg, nie wspominając już o drogach
wiejskich, czy po prostu tych najmniej uczęszczanych.

Google Maps znakomicie odwzorowuje ukształtowanie terenu, w sposób jednoznaczny potrafi określić nazwy ulic, nawet
tych zlokalizowanych w mniejszych miejscowościach.
Oczywiście nie jest to rozwiązanie pozbawione wad. Wiele dróg nie zostało
wciąż ujętych w mapach Google.

Polscy użytkownicy mapy Google mają do dyspozycji trzy tryby wyświetlania mapy:
mapa topograficzna (widok Map), mapa satelitarna
(widok Satellite) oraz hybryda obu rozwiązań (widok Hybrid). W połowie roku 2007 Google wprowadziło jeszcze widok uliczny
(Street View), lecz jest on dostępny tylko na niewielkich obszarach Stanów Zjednoczonych. Widok uliczny pozwala na wirtualne poruszanie
się po ulicach miasta wzdłuż dróg. W ten sposób możemy oglądać oczyma przechodnia ulice San Francisco.

Mapa satelitarna to zdjęcia powierzchni ziemi wykonane przez aparaty satelit krążących
na orbicie okołoziemskiej. Mapa kartograficzna to tradycyjna mapa z naniesioną siatką ulic i zaznaczonymi budynkami. Połączenie
obu map pozwala na oglądanie miejskich ulic z jeżdżącymi po nich samochodami i przechodzącymi pieszymi. Oczywiście wszystkie
obiekty pozostają nieruchome, gdyż czas odświeżenia zdjęć jest z pewnością dłuższy niż jeden dzień.

Google Maps API

Usługa Google Maps API jest propozycją adresowaną
do deweloperów pragnących połączyć możliwości Google Maps z własną stroną.
W rzeczywistości jednak nie trzeba być deweloperem, programistą, ani nawet webmasterem,
by udostępnić na własnej stronie mapę Google.

Korzystanie z Google Maps API jest bezpłatne i pozbawione konieczności wyświetlania reklam \”w zamian za usługę\”. To może się
w każdej chwili zmienić, gdyż Google pozostawiło sobie możliwość zmiany jej parametrów. Prawdopodobieństwo, że Google wprowadzi
reklamy do Maps API wydaje się jednak niewielkie.

Przyjrzymy się funkcjom dostarczanym przez Google Maps API. Celem jest wdrożenie
na firmową stronę WWW mapy dojazdu do firmy. Jest to najłatwiejsze praktyczne zastosowanie
Maps API. Oprogramowanie Google pozwala na tworzenie bardzo rozbudowanych
serwisów, z bazami zawierającymi setki tysięcy lokalizacji.

By firmowa mapa nadawała się do użytku, musi posiadać kilka cech:

• musi wskazywać lokalizację firmy za pomocą wskaźnika (jeżeli firma ma więcej oddziałów, wszystkie powinny być zaznaczone na mapie, nawet gdy znajdują się poza obszarem widocznym domyślnie),
• musi zostać wyśrodkowana w pożądanej lokalizacji,
• ponad wskaźnikiem powinna znaleźć się chmurka z nazwą firmy i jej lokalizacją,
• musi dać się przesuwać, pomniejszać i powiększać.

Przykład 1 – bazowy

Zawartość pliku mapa.html to typowy dokument
HTML zawierający dodatkowo dwa
skrypty JavaScript. Rozpoczynamy od deklaracji
nagłówka:

Dołączamy do nagłówka odwołanie do programu mapy, w miejsce KLUCZ_DO_MAPS_API wstawiając klucz uzyskany w procesie rejestracji:

Utworzymy teraz funkcję load, której celem
jest skonfigurowanie mapy i jej wyświetlenie.
Potrzebne będzie określenie jaki element
strony WWW będzie odpowiadał za
wyświetlenie mapy. Do instancji obiektu
GMap2 podajemy jako parametr odwołanie
do elementu o ID \”map\”, czyli do elementu
DIV.

Kolejno wykonujemy operacje na
obiekcie map, dodając możliwość powiększania,
pomniejszania mapy (przyciski nawigacyjne)
przy użyciu metody {stala}addControl{/stala}.
By mapa została wyśrodkowana na konkretnym
obszarze, konieczne jest użycie metody
{stala}setCenter{/stala}, która ustawia środek mapy
w określonej lokalizacji. Wartość 15 to powiększenie.

Maksymalna wartość tego parametru
zależy od umiejscowienia obiektu
na kuli ziemskiej (jest zmienna). Wartość 1
oznacza najmniejsze powiększenie (widoczny
jest cały glob). Dodanie markera wskazującego
określoną lokalizację polega na skorzystaniu
z metody {stala}addOverlay{/stala} i dokonaniu
instancji klasy {stala}GMarker{/stala}, która w przekazywanym
parametrze otrzymuje współrzędne.
Cały kod odpowiedzialny za tę operację wygląda
następująco:

W sekcji body dokumentu HTML umieszczamy
wywołanie funkcji {stala}load(){/stala} oraz element DIV,
który ma wyświetlać mapę. Wymiary width
i height muszą być zgodne z tym, co określiliśmy
w elemencie IFRAME:

Efekt widoczny jest na rysunku Przykład 1
i dostępny w wersji elektronicznej na płycie
dołączonej do magazynu.
Naniesienie na mapę kolejnego markera
polega na dodaniu kolejne linii kodu:

map.addOverlay(new GMarker(new GLatLng (szerokość, długość)));

Przykład 2

Uzupełnijmy teraz mapę o:

• większy pasek skalowania mapy,
• możliwość zmiany mapy na satelitarną lub hybrydę topograficznej i satelitarnej.

Dotychczasową metodę {stala}addControl{/stala} zamieniamy
na:

map.addControl(new GLargeMapControl());

Ponieważ mapa Google została napisana
w języku angielskim, stosujemy trik, by podstawić
nazwy polskie:

var MapTypes = map.getMapTypes();
MapTypes[0].getName = function() { 
  return \"Mapa\"; 
}
MapTypes[1].getName = function() { 
  return \"Satelitarna\"; 
}
MapTypes[2].getName = function() { 
  return \"Hybryda\"; 
}

Możliwość wyboru typu mapy (wśród kartograficznej,
satelitarnej i hybrydowej) dodajemy
za pomocą metody {stala}addControl{/stala}:

map.addControl(new GMapTypeControl());

Przykład 3

Najczęściej nie ma sensu udostępniać użytkownikowi
zaawansowanych możliwości obsługi
mapy.

Jeżeli mapa ma mieć wyłącznie
dwa przyciski do powiększania lub pomniejszania,
należy powrócić do przykładu 1, zamieniając
linię:

map.addControl(new GSmallMapControl());

na

map.addControl(new GsmallZoomControl());

Przykład 4

Chmurka wokół markera to efekt, który można
uzyskać poprzez zastosowanie dodatkowej
metody.

Chmurka może zawierać dowolny
tekst, choć przez użytkowników preferowana
jest tu nazwa firmy, lokalizacja, opcjonalnie
numery telefonów. Z przykładu 3 usuwamy
{stala}map.addOverlay(){/stala} i dodajemy następujący
kod:

var marker = new GMarker(new GLatLng (50.061561,19.938764));
var text = \"Firma XYZ
ul. Rynek 1
30-000 Kraków\";
GEvent.addListener(marker, \"click\", function() {marker.openInfoWindowHtml(text);});
map.addOverlay(marker);
marker.openInfoWindowHtml(text);

Parametr text zawiera treść chmurki. Taką
treść należy przygotować w języku HTML,
gdzie {html}{/html} oznacza pogrubienie, a {html}
{/html}
przejście do nowej linii. Dodatek w postaci
klasy {stala}GEvent{/stala} służy do obsługi sytuacji kiedy
zamkniemy chmurkę i klikniemy ponownie
marker. Wówczas chmurka pojawi się ponownie.
Jeżeli chcemy, by chmurka pojawiła
się dopiero po kliknięciu markera, usuwamy
ostatnią linię z powyższego listingu.