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 disableDefaultUI powoduje
wyłączenie domyślnych kontrolek mapy. 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 nowy budynek ETI i
kliknąć go. Z wyskakującego okienka należy skopiować współrzędne geograficzne. 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 obracanie widoku. Służą do tego pola obiektu myOptions: 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,

mapTypeControl, pozwalająca zmienić typ wyświetlanej mapy,

streetViewControl, pozwalająca przełączyć się w tryb Street View.
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
http://maverick.eti.pg.gda.pl:8080/googlemaps/Placemark_example.kml.
się
na
stronie:
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ć
http://maverick.eti.pg.gda.pl:8080/googlemaps/index.htm
na
serwer
pod
adresem
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 pozwalającej na przechwytywanie
współrzędnych za pomocą API Google Maps.
1.0 pkt.
2. Wyświetlenie na stronie 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”.
1,0 pkt.
3. 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.
4. 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.
5. Zaprezentowanie mechanizmu odwrotnego geokodowania na obszarze Polski. 1,0 pkt.