G o o g l e maps

1. Google maps Daniel Glagla Informatyka I Grupa I

2. Czym jest Google maps ? Google maps to serwis firmy Google oferujący dostęp do zaawansowanej i łatwej w obsłudze technologii map i informacji o firmach lokalnych, w tym ich lokalizacji, danych kontaktowych oraz tras dojazdu do nich. Google maps znane było przez pewien czas jako Google Local. Obecnie zdjęcia map oglądać można w kilkunastu skalach, jednak poziom największego zbliżenia jest różny w różnych miejscach. W Stanach Zjednoczonych w większości miast na najwyższym poziomie zbliżenia rozróżnić da się nawet pojedyncze drzewa (podobnie w wypadku większych miast w Polsce), z drugiej strony sporą część świata wciąż można oglądać jedynie z bardzo dalekiej perspektywy. Do serwisu regularnie dodawane są nowe zdjęcia.

3. Funkcje Google maps: • Zintegrowane wyniki wyszukiwania firm – znajdowane lokalizacje i dane kontaktowe firm są wyświetlane w jednym, zintegrowanym z mapą miejscu. • Przeciąganie mapy – kliknij i przeciągnij mapę, aby natychmiast wyświetlić sąsiednie obszary (nie musisz długo czekać na pobranie nowych sekcji). • Zdjęcie satelitarne – można wyświetlać zdjęcia satelitarne danej lokalizacji, nakładać na nie elementy mapy oraz powiększać i przesuwać widok. • Widok Ziemi – po kliknięciu przycisku Ziemia możesz wyświetlać zdjęcia i teren 3D z programu Google Earth oraz powiększać, przesuwać i przechylać widok. • Widok ulicy (Street View) - możesz wyświetlać zdjęcia ulicy i poruszać się przy ich użyciu.

4. Szczegółowe wskazówki dojazdu – wpisujemy adres, aby znaleźć lokalizację i wyznaczyć trasę dojazdu do niej. Można też zaplanować podróż, dodając kolejne cele oraz klikając i przeciągając trasę, aby dostosować ją do własnych wymagań. • Skróty klawiaturowe – do przesuwania mapy w lewo, w prawo, w górę i w dół (klawisze strzałek), do rozszerzania widoku (klawisze Page Up, Page Down, Home i End), do powiększania i pomniejszania (klawisze plus (+) i minus (-)). • Funkcja powiększania i pomniejszania za pomocą dwukrotnego kliknięcia – dwukrotne kliknięcie lewym przyciskiem myszy pozwala powiększyć widok mapy, a dwukrotne kliknięcie prawym przyciskiem – pomniejszyć go • Powiększanie i pomniejszanie za pomocą kółka myszy – widok mapy można powiększać i pomniejszać, obracając kółko myszy.

5. Przykładowa mapa z zaznaczonymi funkcjami: 1. Pokaż trasę - umożliwia wyznaczenie trasy 2. Moje mapy – edytuje i zapisuje własne mapy 3. Przeszukaj mapy – znajduje na mapie miejsca lub firmy 4. Pokaż/Ukryj - Umożliwia ukrycie lub rozwinięcie lewego panelu 5. Korki – wyświetla informacje o natężeniu ruchu 6. Więcej… - wyswietla dodatkowe, ukryte funkcje mapy 7. Drukuj/Wyślij – drukuje lub wysyła mapę 8. Link - umożliwia utworzenie adresu internetowego (URL) 9. Wyniki wyszukiwania – panel zawiera wyniki wyszukiwania 10. Przycisk – służy do poruszania się po mapie 11. Mapa – obszar mapy 12. Widok ulicy – pozwala na wirtualny spacer ulicami miasta 13. Okno – wyswietla informacje o danym punkcie 14. Mapa ogólna - przedstawia wyświetlony fragment mapy na tle większego obszaru geograficznego.

6. Mapa na własnej stronie, czyli Google mapsAPI • Firma Google z czasem udostępniła pierwszą wersję API, która umożliwiała "osadzenie" mapy na dowolnej stronie internetowej. • Obecnie API Google Maps dostępne jest w wersji stabilnej 3, oraz nierozwijanej 2. • Proste aplikacje to kwestia zaledwie paru linijek kodu - mechanizmy obsługujące mapę są po stronie Google, przez co autor mapy nie musi się o nie w ogóle troszczyć.

7. Jak wstawić mapę na stronę za pomocą API v3? 1. Wstawiamy skrypt API pod tytułem strony tak jak na przykładzie: ….<title>Przykładowa strona</title>                 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>  </head>….   Obowiązkowe jest dołączenie parametru &sensor=true lub &sensor=false. Z pierwszego należy skorzystać tylko wtedy, gdy tworzona przez nas aplikacja ma umożliwiać geolokalizację na podstawie sygnału GPS.

8. 2. Tworzenie blokowego elementu 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 przykładach na tej stronie obiekt z mapą nazywa się mapka, i jest blokowym elementem div. W kodzie należy umieścić: <div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;"> <!-- tu będzie mapa --> </div>

9. 3. Zainicjowanie mapy. Tworzymy w JavaScript nowy obiekt Map z przestrzeni google.maps z odpowiednimi parametrami, a następnie centrujemy mapę na wybranych współrzędnych i przy zadanym poziomie zoom <script type='text/javascript'>     function mapaStart()      {          var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);       var opcjeMapy = {         zoom: 10,         center: wspolrzedne,         mapTypeId: google.maps.MapTypeId.ROADMAP       };       var mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);    }      </script>    

10. Objaśnienie kodu inicjującego mapę: • 4 linijka - definiujemy abstrakcyjny punkt o pewnych współrzędnych geograficznych. Konstruktor LatLng() przyjmuje dwa argumenty - pierwszy to szerokość a drugi to długość geograficzna. Jeżeli podane wartości są dodatnie, to API przyjmuje, że chodzi o półkulę północną / wschodnią. Aby odwoływać się do współrzędnych na półkuli południowej i zachodniej należy postawić znak minus przed współrzędną. • 5 - 9 linijka - konfigurujemy początkowe parametry mapy. Ustawiamy początkowy zoom (zoom) w skali od 0 (najdalej) do 19 (najbliżej), współrzędne punktu startowego (ustawione wcześniej) oraz typ mapy. Na początku będziemy korzystać ze standardowej mapy, dlatego wybieramy MapTypeId.ROADMAP. • 10 linijka - tworzymy obiekt mapy. Musimy podać dwa argumenty. Pierwszym jest 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 Map będzie document.getElementById('mapka'). Drugim argumentem jest obiekt, który zawiera "konfigurację" mapy. Stworzyliśmy go wcześniej (opcjeMapy), dlatego po prostu wpisujemy nazwę zmiennej opcjeMapy. • Funkcję mapaStart() będziemy wywoływać przy załadowaniu strony poprzez podłączenie jej do zdarzenia onload w tagu body (<body onload="mapaStart()">).

11. Kod w pełnej postaci: <!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" />                 <style type="text/css" media="all">@import "/style/Przyklad.css";</style>           <title>Pierwsza strona</title>                 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>           </head>             <body onload="mapaStart()">                 <script type="text/javascript">              function mapaStart()              {                  var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);               var opcjeMapy = {                 zoom: 10,                 center: wspolrzedne,                 mapTypeId: google.maps.MapTypeId.ROADMAP               };               var mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);            }              </script>              <div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">              <!-- tu będzie mapa -->              </div>              <p id="info">               Oto pierwsza mapa, stworzona za pomocą Google Maps API v3           </p>       </body>         </html>     

12. Uwagi • Mapa domyślnie posiada kontrolki i interfejs, przypominający mapę na stronie maps.google.com. Użycie dodatkowych kodów pozwala na większą interakcję i kontrolę nad mapą. • 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. Każdemu z czterech trybów przypada odpowiednia stała: ROADMAP, SATELLITE, HYBRID oraz TERRAIN z przestrzeni MapTypeId. Aby mapa uruchomiła się w wybranym trybie, należy podmienić w poprzednim przykładzie linię mapTypeId: google.maps.MapTypeId.ROADMAP na wybraną przez nas, na przykład mapTypeId: google.maps.MapTypeId.HYBRID dla mapy hybrydowej. • Jeśli znamy współrzędne miejsca, które chcemy pokazać na mapie i są one w formacie dziesiętnym, to podajemy je normalnie jako długość i szerokość geograficzna bez żadnych modyfikacji. Jeśli natomiast znamy współrzędne w formacie DMS, to możemy przeliczyć je na postać dziesiętną w następujący sposób: • DDEG = D + (M*60+ S)/3600 • Przykład: 53°20'15.13'' = 53 + (20*60+15.13)/3600 = 53.3375361

13. Przykład mapy, pisanej w API v3:

14. Bibliografia: • http://maps.google.pl • http://gmapsapi.com/glowna.html • http://pl.wikipedia.org