GOOGLE MAPS
30 XI 2011
Google maps
• To jedna z usług dostarczanych przez google, umożliwiająca wyszukiwanie obiektów,
oglądanie map i zdjęć lotniczych powierzchni Ziemi, oraz udostępniający pokrewne im
funkcje. Został założony w 2005 roku przez
Google, jest darmowy dla niekomercyjnych
użytkowników. Mapa posiada 18- stopniową
skalę gdzie najmniejsza dokładność to skala
1 : 200 000 000 gdzie widać praktycznie całą
planetę, natomiast największa dokładność to
skala 1 : 800. Przykłady:
Najmniejsza dokładność
Największa dokładność
Interfejs google maps
1. Wyszukiwarka
2. Opcje zachowywania lokalizacji (drukuj, prześlij, linkuj) 3. Dodatkowe informacje nt. wyszukanych danych 4. Przesuwanie obrazu.
5. Suwak skali
6. Skala
7. Tryby mapy
8. ‘Pokaż trasę’ oraz ‘Moje miejsca’
Wyszukiwarka
• Wyszukiwanie odbywa się podobnie jak w przypadku innych usług google, tj. poprzez wprowadzenie zapytania w polu
wyszukiwania, tyle że jako wynik zwracana jest szukana lokalizacja.
Zapytanie może dotyczyć nazw
geograficznych, współrzędnych, instytucji,
prywatnych firm itd.
Dodatkowe informacje
• W panelu bocznym na lewo od mapy przedstawione są dodatkowe dane na temat znalezionych lokacji (3), w formie podobnej do typowych wyników
wyszukiwania w Google (łącznie z wyglądem
nawigatora po stronach z wynikami), np. zdjęcia, opisy i strony internetowe znalezionych obiektów, a w przypadku wyszukiwania miejscowości – galerie zdjęć, mapy użytkowników itd. Dzięki Google Maps API istnieje możliwość umieszczenia na stronie
www- mapy pokazującej daną lokalizację, np. w
przypadku gdy właściciel restauracji chciałby na
swej stronie pokazać dojazd.
Pokaż trasę
• Za pomocą tej opcji google maps oferuje
możliwość ustalenia optymalnej drogi z jednego punktu do drugiego dla takich środków
transportu jak: samochód, transport publiczny,
rower czy też „piechtobus”.
Przykład wyznaczenia trasy dla samochodu z Sosnowiec – będzińska do Jaworzno -
grunwaldzka
Opis słowny trasy
Zapisanie wyszukanego wyniku
o W przypadku, gdy użytkownik chce zachować wyniki swojego wyszukiwania, z pomocą
przychodzą trzy opcje (2) dostępne w prawym górnym rogu mapy:
„drukuj” - drukuje bieżącą mapę wraz z wynikami wyszukiwania
„wyślij” - wysyła stan bieżącej mapy wraz z wynikami na podany adres e-mail (bądź na telefon komórkowy)
„linkuj” - podaje odnośnik do mapy wraz z
wynikami wyszukiwania, gotowy do skopiowania
w inne miejsce
Suwak skali
• suwak skali (5) – ma 18 stopni i służy do
regulacji skali mapy, która wyświetlana jest w
lewym dolnym rogu mapy w milach i kilometrach (6). Domyślnie skala jest ustawiona na trzecim stopniu od dołu. Można przesunąć o jeden
stopień w górę/dół, klikając na „+” lub „-”, bądź
też kliknąć bezpośrednio na wybrany stopień
skali. Niezawodna również okazuje się kulka u
myszki.
Tryby mapy (7)
• Satelita • Mapa
Satelita - przedstawia widok Ziemi z lotu ptaka stworzony z połączenia licznych zdjęć satelitarnych. Nie zawsze jakość zdjęć jest taka sama. Na niektórych obszarach (np. rejony dużych miast) możliwe jest uzyskanie przybliżenia
pozwalającego na rozróżnienie pojedynczych samochodów czy osób, gdzie indziej z kolei ledwo co da się dostrzec rozmazane kontury miast.
Mapa - świat jest przedstawiony w postaci mapy wektorowej. Poza zarysami lądów, odwzorowane są także jednostki
administracyjne, drogi, zabudowania, zbiorniki wodne a także
instytucje i prywatne przedsiębiorstwa, na temat których mozna
po kliknięciu myszą uzyskać podstawowe informacje (adres,
dojazd, strona www itd.). Użytkownik może także dodać własną
firmę.
Inne opcje
• Poniżej wyboru trybu mapy, możemy
skorzystać z innych opcji.
Korki
Niedziela 18.00
Korki: (opcja: „zmień”)
Zdjęcia
Wideo
Wikipedia
Podobne usługi do „google maps”
• Google Moon (moon.google.com) – pokazuje powierzchnię księżyca.
• Google Mars (mars.google.com) – pokazuje powierzchnię Marsa.
Podobne usługi do „google maps”
• Google Sky (sky.google.com) – pokazuje przestrzeń kosmiczną.
Ikona postaci
• Za pomocą ikony postaci, można przejść do poziomu ulic.
Ikona postaci – włochy (koloseum)
Ikona postaci w polsce
Ikona postaci Sosnowiec
Google maps api
• Google Maps API umożliwia
wstawienie mapy na dowolną
stronę internetową.
1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
3. <html xmlns='http://www.w3.org/1999/xhtml'>
4. <head>
5. <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
6. <title>Pierwsza strona</title>
7. <script src='http://maps.google.com/maps?file=api&v=2&sensor=false&key=XXX'
8. type='text/javascript'></script>
9. </head>
10.
11. <body onload='mapaStart()' onunload='GUnload()'>
12.
13. <script type='text/javascript'>
14. function mapaStart() 15. {
16. if(GBrowserIsCompatible())
17. {
18. var mapa = new GMap2(document.getElementById("mapka"));
19. mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);
20. }
21. }
22. </script>
23. <div id='mapka' style='width: 700px; height: 300px; border: 1px solid black; background:
gray;'>
24. </div>
25. </body>
26. </html>
Objaśnienie niektórych komend
• Linia 7 i 8 - <scriptsrc='http://maps.google.com/maps?file=api&v=2&sensor=false&
key=XXX' type='text/javascript'></script> – dołączenie skryptu API gdzie XXX to tzw API- key.
Klucz ten można wygenerować za darmo na stronie (następny.slajd). Wystarczy podać adres swojej strony, zgodzić się na warunki licencji, a system wygeneruje kilkunastoznakowy ciąg, który należy wstawić w miejsce XXX. Każda strona ma inny klucz - jeśli podamy zły lub nie podamy go wcale, mapa nie uruchomi się (nie dotyczy to stron internetowych na dysku komputera - są one wolne od sprawdzania autentyczności klucza).
• Linie 13- 22 – to inicjowanie mapy.
• Linia 16 if(GBrowserIsCompatible()) - sprawdzamy, czy przeglądarka jest kompatybilna i potrafi wyświetlić mapę
• Linia 18 var mapa = new GMap2(document.getElementById("mapka")); - tworzymy obiekt mapy.
Przy tworzeniu obiektu klasy GMap2 musimy podać przynajmniej jeden argument - odwołanie do elementu HTML, w którym będzie wyświetlana mapa. W naszym przykładzie element ten będzie nazywał się mapka, więc argumentem funkcji GMap2 będzie
document.getElementById('mapka')
• Linia 19 - mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);
centrujemy mapę na współrzędnych (53.41935400090768,14.58160400390625). Funkcja
setCenter() przyjmuje dwa argumenty - pierwszy to punkt wycentrowania, drugi to poziom
zoomu. Punkt musi być przekazany jako obiekt klasy GLatLng, który przyjmuje dwa argumenty
- współrzędne WGS84. Są to kolejno: szerokość i długość geograficzna.
Generowanie kodu
(linia7) http://code.google.com/intl/pl-PL/apis/maps/signup.html
Objaśnienie niektórych komend
• Linia 19 cd. Zoom jest podawany jako liczba od 0 do 19, gdzie 19 to najbliższe możliwe przybliżenie.
• Linie 23, 24 - <div id='mapka' style='width: 700px; height: 300px; border: 1px solid black;
background: gray;'> - Tworzy blokowy element html (div), w którym będzie znajdować się mapa.
Koniecznie należy określić w nim parametr id, warto również ustawić wymiary mapy za pomocą atrybutu style. We wszystkich zamieszczonych przykładach obiekt z mapą nazywa się mapka, i jest blokowym elementem div.
Uwagi:
• Po utworzeniu obiektu klasy GMap2, zawsze stosuj funkcję mapa.setCenter(). Centrowanie musi się odbyć zawsze przed wykonaniem jakiejkolwiek innej operacji na mapie - w innym przypadku otrzymasz błąd skryptu.
• Utworzona przez nas mapa domyślnie wyświetla się w trybie zwykłym. API oferuje dodatkowo jeszcze trzy: mapę satelitarną, mapę hybrydową oraz mapę fizyczną terenu.
Jak zmieni ć tryb mapy?
Zmiana trybu mapy
• mapa.setMapType(…);
• Tryby mapy:
1. G_NORMAL_MAP
2. G_SATELLITE_MAP
3. G_HYBRID_MAP
4. G_PHYSICAL_MAP
Dodawanie markerów
• var mapa;
Tworzymy zmienną globalną.
przed funkcją: „mapaStart()”.
• var punkt = new GLatLng(50.153,19.25);
zmienna wyznaczająca wspólrzędne goegraficzne.
Po wycentrowaniu mapy. I dalej:
• var marker = new GMarker(punkt,{title: 'Tutaj (mniej więcej) mieszkam'});
Tworzymy marker.
• mapa.addOverlay(marker);
Wrzucamy go na mape.
Ustawienie parametrów markera
• clickable - jeśli false, to markera nie można kliknąć (domyślnie true)
• draggable - jeśli true, to marker może być przeciągany za pomocą myszy (domyślnie false)
• title - określa tekst, który pojawi się po najechaniu myszką nad marker
• icon - określa ikonę, która zostanie użyta dla markera
• Przykład:
var marker = new GMarker(punkt,{title: 'Tutaj (mniej więcej) mieszkam', draggable: true });
Geokodowanie
• Polega ono na tym, że zamiast wpisywania współrzędnych,
możemy podać interesujące nas:
państwo, miasto, ulicę itd. Jak to
zrobić? Oto przykład:
• <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
• 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
• <html xmlns='http://www.w3.org/1999/xhtml'>
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
• <title>Przykład</title>
• <!--skrypty-->
• <script src='http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRBRXpdM9jp6G1MF9yLMfWuIYZt2BR5Ltrn1m4MP2hliyyWcC1AqLxZ3A' type='text/javascript'></script>
• </head>
• <body onload='mapaStart()' onunload='GUnload()'>
• <script type='text/javascript'>
• <!--
• // zmienne globalne
• var geo;
• var mapa;
•
• function skoczDoAdresu(adres)
• {
• if(!geo) return;
• geo.getLatLng(adres,function(punkt)
• {
• if (!punkt)
• {
• // jeśli punkt nie istnieje, to adres nie został znaleziony
• alert(adres + " nie został znaleziony!");
• }
• else
• {
• // centrujemy na znalezionym punkcie
• mapa.panTo(punkt);
•
• // czyścimy markery z mapy
• mapa.clearOverlays();
•
• // dodajemy w tym miejscu marker
• var ikona = new GIcon();
• ikona.image='http://maps.google.com/mapfiles/kml/pal3/icon52.png';
• ikona.shadow='';
• ikona.iconSize=new GSize(32,32);
• ikona.iconAnchor=new GPoint(16,16);
• ikona.infoWindowAnchor=new GPoint(16,16);
•
• var marker = new GMarker(punkt,{icon: ikona, title: adres});
• mapa.addOverlay(marker);
•
• // i otwieramy dymek z adresem
• marker.openInfoWindowHtml('<strong>Poszukiwany adres</strong><br />'+adres);
• }
• });
• }
•
• function mapaStart()
• {
• if(GBrowserIsCompatible())
• {
• mapa = new GMap2(document.getElementById("mapka"),{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
• mapa.setCenter(new GLatLng(53.429805, 14.537883), 15);
•
• // kontrolki mapy
• mapa.addControl(new GLargeMapControl());
• var typyMapy = mapa.getMapTypes();
• typyMapy[0].getName= function() { return "Mapa";}
• typyMapy[1].getName = function() { return "Satelita";}
• typyMapy[2].getName = function() { return "Hybryda";}
• mapa.addControl(new GMapTypeControl());
• mapa.addControl(new GOverviewMapControl());
• mapa.addControl(new GScaleControl());
•
• // nowy obiekt do geokodowania
• geo = new GClientGeocoder();
• }
• }
• -->
• </script>
• <form id="geo" action="#" onsubmit="skoczDoAdresu(document.getElementById('szukanyAdres').value); return false;">
• <strong>Wpisz adres do geokodowania</strong>
• <br />
• <input type="text" style="width: 280px; border: 1px solid black; color: #898989; font-size: 1.1em; padding: 3px;" id="szukanyAdres" />
• <br/>
• <strong>... lub wybierz przykładowy z listy</strong><br />
• <select style="width: 300px; border: 1px solid black; color: #898989; font-size: 1.1em; padding: 3px;" onchange="document.getElementById('szukanyAdres').value=this.options[this.selectedIndex].value">
• <option selected="selected">wybierz z listy</option>
• <option value="Szczecin, Wojska Polskiego 53">Szczecin, Wojska Polskiego 53</option>
• <option value="Szczecin, Niepodległości 20">Szczecin, Niepodległości 20</option>
• <option value="Szczecin, plac Grunwaldzki">Szczecin, plac Grunwaldzki</option>
• <option value="Warszawa, Ujazdowskie 15">Warszawa, Ujazdowskie 15</option>
• <option value="Berlin, Prenzlauer Berg">Berlin, Prenzlauer Berg</option>
• <option value="Mierzyn (policki)">Mierzyn (policki)</option>
• </select>
• <br /><input type="submit" value="Pokażna mapie" />
• </form>
• <div id='mapka' style='width: 680px; height: 450px; border: 1px solid black; background: gray;'>
• <!-- tu będzie mapa -->
• </div>
• </body>
• </html>
• <!--
• Copyright (C) 2007-2011 Poznaj Google Maps API - www.gmapsapi.com
• Informacje o prawach autorskich i dozwolonym sposobie wykorzystania kodu: http://gmapsapi.com/ostronie.html
• -->
![Czy prawo rzymskie przestało istnieć? [13]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)