Transcript google.maps.MapTypeId.ROADMAP

Google maps
Daniel Glagla
Informatyka I
Grupa I
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.
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.
•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.
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.
Mapa na własnej stronie, czyli
Google maps API
• 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ć.
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="tex
t/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.
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>
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>
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()">).
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>
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
Przykład mapy, pisanej w API v3:
Bibliografia:
http://maps.google.pl
http://gmapsapi.com/glowna.html
http://pl.wikipedia.org