Podstawy korzystania z API Google Maps

Laboratorium Systemów Informacji Przestrzennej
Internetowy System Informacji Przestrzennej
na przykładzie Google Maps
1. Podstawy korzystania z Google Maps API
Firma Google udostępnia interfejs programowania internetowych aplikacji wykorzystujących
biblioteki Google Maps. Pozwala to na tworzenie własnych implementacji elementów Google Maps
w języku JavaScript, jak również rozszerzanie istniejących funkcjonalności o nowe elementy.
Z podanego przez prowadzącego adresu należy pobrać plik map-simple.html i zapisać na
dysku, a następnie otworzyć np. w Notatniku. Najważniejszym jego elementem jest funkcja
initialize(), która odpowiada za wygląd mapy oraz tworzenie elementów interfejsu użytkownika. Na
razie zawiera ona niezbędne elementy pozwalające na inicjalizację mapy. Struktura myOptions
zawiera początkowe ustawienie widoku mapy za pomocą pól zoom o wartości 8 oraz center o
wartości new google.maps.LatLng(-34.397, 150.644), co powoduje wycentrowanie utworzonej
mapy na punkcie o podanych współrzędnych geograficznych oraz odpowiednio przybliża obraz (w
tym wypadku jest to ósmy poziom przybliżenia obrazu). Zmienna mapTypeId określa rodzaj
wyświetlanej mapy - domyślnie jest to mapa drogowa (google.maps.MapTypeId.ROADMAP). Na
początek zmienimy punkt, na który wskazywać będzie mapa. W tym celu należy wejść na
http://maps.google.com, odnaleźć na mapie budynek ETI i umieścić go na środku mapy (Uwaga:
nie należy korzystać z udostępnianej przez Google opcji wyszukiwania po nazwie!). Następnie
należy kliknąć na „Link” (symbol ogniwa łańcucha) i skopiować z pola: „Wklej kod HTML do
swojej strony internetowej” wartości długości i szerokości geograficznej. Na tej podstawie należy
zmienić wartość google.maps.LatLng(-34.397, 150.644) tak, by nasza strona pokazywała nowy
budynek ETI. Następnie należy przyjrzeć się efektom zastosowania różnych wartości pola zoom
obiektu myOptions.
Następnym etapem będzie dodanie do mapy kontrolek pozwalających na
przybliżanie/oddalanie i przesuwanie widoku. Służą do tego pola obiektu myOptions: panControl,
zoomControl, oraz rotateControl. Ich wartościami mogą być wartości logiczne true albo false.
Należy przetestować efekty dodania do mapy każdej kontrolki z osobna, jak również kilku naraz.
Przybliżanie i oddalanie widoku można również zrealizować przy użyciu kółka myszki, do czego
służy pole scrollwheel.
Innymi przydatnymi kontrolkami są:
scaleControl, wyświetlająca aktualną skalę mapy,
overviewMapControl, wyświetlająca w rogu ekranu pomniejszoną mapę okolicy
Należy zaobserwować wyniki dodania wymienionych kontrolek do mapy.
Na zakończenie ćwiczenia należy stworzyć prosty skrypt przechwytywania wartości
współrzędnych geograficznych z Google Maps. W tym celu należy w ciele dokumentu HTML
stworzyć dwa obiekty typu input , o identyfikatorach odpowiednio „lonbox” i „latbox”. Następnie
należy przechwycić wydarzenie kliknięcia na mapę przy pomocy metody
google.maps.event.addListener(map, 'click', grab). Metoda ta powoduje zarejestrowanie funkcji
„grab” jako obiektu reagującego na wystąpienie zdarzenia kliknięcia ('click') na obszar mapy.
Następnie należy stworzyć function grab(event) i w jej ciele przypisać do obiektów lonbox i latbox
odpowiednio wartości event.latLng.lat() oraz event.latLng.lng() (można wykorzystać metodę
document.getElementById('..').value). Aby zwiększyć precyzję zaznaczania punktów w Google
Maps, można zmienić kształt domyślnego kursora. Wygląd kursorów definiuje się jako wartości pól

draggableCursor oraz draggingCursor w obiekcie myOptions. Przykładowo, var myOptions =
{ draggableCursor: 'crosshair' } spowoduje zmianę domyślnego kursora („rączki”) na krzyżyk.
Inne dostępne kursory to m.in. 'pointer', 'move' i 'default'.
2. Podstawy opisu obiektów geograficznych przy pomocy Keyhole Markup Language.
Keyhole Markup Language jest językiem opisu obiektów przestrzennych opartym na XML. Do
jego najważniejszych znaczników należą:
Document – jest to kontener dla obiektów i stylów. Wymagany, jeżeli stosujemy
współdzielone style.
Placemark – obiekt skojarzony z konkretnym kształtem geometrycznym. Jeden z
niewielu obiektów, na które użytkownik może klikać.
Polygon – trójwymiarowy obiekt opisywany przez dwa zamknięte kształty typu
LinearRing, tworzące jego obrys zewnętrzny (OuterBoundary) oraz wewnętrzny
(InnerBoundary). Każdy z nich składa się z zestawu wierzchołków opisanych
współrzędnymi longitude, latitude oraz altitude (wysokość n.p.m.).
LineString – trójwymiarowy obiekt odwzorowujący polilinię.
Przykładowy plik KML z zaznaczonymi obiektami znajduje się na stronie:
http://maverick.eti.pg.gda.pl:8080/googlemaps/Placemark_example.kml.
Ponieważ Google Maps wymaga zamieszczania plików KML na serwerach www, kolejne etapy
ćwiczenia będą wymagały zapisywania w osobnych plikach KML. Każdy plik powinien mieć
nazwę postaci inicjały_indeks_zadanie.kml. Przykład: Dla pierwszego zadania Jan Kowalski o
numerze indeksu 12345 powinien stworzyć plik o nazwie jk_12345_1.kml
Przygotowany plik KML należy wysłać na serwer pod adresem
http://maverick.eti.pg.gda.pl:8080/googlemaps/index.htm
Rysunek 1. Formularz do wysyłania plików KML
Po poprawnym załadowaniu pliku otrzymamy następujący komunikat:
Zawartość powyższego łącza należy skopiować i dodać do utworzonej w punkcie
pierwszym ćwiczenia mapy. W tym celu należy wykorzystać metody var kmllayer = new
google.maps.KmlLayer('zawartość_łącza') oraz kmllayer.setMap(map). W przypadku

dokonywania późniejszych zmian w pliku KML istnieje konieczność ponownego załadowania
pliku oraz zmiany wartości adresu www w celu obejścia mechanizmu cache API Google. Aby
uniknąć konieczności takich zmian, można w adresie pliku KML dodać zmienną losową, np. w
postaci „http://adrespliku.kml?x="+Math.random();”
3. Geokodowanie
Mapy Google udostępniają usługę konwersji współrzędnych geograficznych na adresy za
pomocą klasy google.maps.Geocoder. Na terenie Polski ogranicza się ona zwykle do kodów
pocztowych oraz nazw miast.
W edytowanym pliku HTML przed funkcją initialize należy utworzyć nowy obiekt geocoder
podanej wyżej klasy oraz nowy obiekt infowindow klasy google.maps.InfoWindow(). Następnie w
ciele dokumentu HTML należy za pomocą znacznika input typu button utworzyć przycisk o
atrybucie onclick do którego przypisana będzie funkcja codeLatLng(). Następnie należy utworzyć
funkcję codeLatLng() w której (analogicznie jak w przypadku przypisywania wartości) należy
odczytać wartość obiektów latbox oraz lonbox i na ich podstawie utworzyć nowy obiekt klasy
google.maps.LatLng. Następnie w ciele tej funkcji należy wywołać metodę geocode obiektu
geocoder w następujący sposób:
geocoder.geocode({'latLng': latlng}, function(results, status) {
});
var marker = new google.maps.Marker({
});
position: latlng,
map: map
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
ZADANIA DO WYKONANIA
1. Zbudowanie zgodnie z instrukcją strony internetowej w oparciu o plik map-simple.html i
stworzenie za jego pomocą pliku w formacie KML przedstawiającego 5 obiektów
najbliższych miejscu zamieszkania (np. przystanki, kluby, kawiarnie). Obiektom tym
należy przyporządkować krótkie opisy. Do zaznaczenia punktów należy wykorzystać
znaczniki KML typu „Placemark”. 2,0 pkt.
2. Przygotowanie polilinii (przynajmniej 5 segmentów) od miejsca zamieszkania do
Politechniki. Osoby mieszkające w akademikach zaznaczają orientacyjną trasę
drogową/kolejową ze swojej rodzinnej miejscowości. Jako przykład można wykorzystać
http://maverick.eti.pg.gda.pl:8080/googlemaps/Polyline_example.kml. 1,0 pkt.
3. Obrysowanie wybranego budynku Politechniki Gdańskiej przy pomocy znacznika KML
typu Polygon. Jako przykład można wykorzystać
http://maverick.eti.pg.gda.pl:8080/googlemaps/Polygon_example.kml. 1,0 pkt.
4. Zaprezentowanie mechanizmu odwrotnego geokodowania na obszarze Polski. 1,0 pkt.