Tutorial Google Maps API: Pierwsza mapa

Pierwsza mapa

Witaj w pierwszym odcinku kursu, omawiającego sposoby użycia oraz zastosowania i funkcjonalności Google Maps API. Kurs jest napisany z myślą o osobach, które posiadają minimalną dawkę wiedzy na temat składni języka Java Script (lub dowolnego innego języka programowania, najlepiej obiektowego) oraz HTML. Co jeszcze będzie potrzebne?:

dowolny edytor HTML lub systemowy Notatnik
nowoczesna przeglądarka internetowa (Opera, Firefox, Konqueror itp.) lub Internet Explorer (6 i wyżej)
odrobina cierpliwości

Google Maps API osiąga najlepszą wydajność na programie Mozilla Firefox - jeśli jeszcze go nie masz, możesz go pobrać, klikając na poniższy link. Firefox z toolbarem Google jest darmową, szybką i wolną od oprogramowania typu spyware i adware przeglądarką internetową:

Na potrzeby kursu nie jest potrzebne posiadanie strony internetowej - stronę z mapą można stworzyć na dysku twardym swojego komputera i przeglądać ją w dowolnej przeglądarce internetowej.

Wstęp

Poniższy obrazek przedstawia typowe elementy, jakie znajdują się na mapie, pisanej w API2:

Elementy mapy Google

Szarym kolorem pod każdym elementem oznaczono nazwę klasy, z której będziemy korzystać przy jego tworzeniu. Nie musisz teraz tego zapamiętywać, poszczególne elementy mapy nauczysz się dodawać w ciągu pierwszych 7 lekcji.

Warto zauważyć kilka rzeczy:

W obszarze mapy znajdują się wszystkie elementy:
- markery (do oznaczania miejsc)
- okna informacyjne (do wyświetlania informacji, pojawiają się na przykład po kliknięciu na marker)
- kontrolki (np. kontrolka nawigacji, kontrolka zmiany trybu mapy, kontrolka skali itd.)
- stałe elementy (prawa autorskie, małe logo Google)
Każdy z opisanych wyżej elementów dodaje się w inny sposób. Po przejściu tego kursu, dodanie tych elementów w różnych kombinacjach będzie proste.
W tym poradniku nauczysz się podstawy - wstawienia "czystej" mapy na stronę.

Gotowy? Zaczynamy!

Wstawienie mapy

Wstawienie mapy na stronę jest bardzo proste - wystarczy do tego kilka linijek kodu HTML i JavaScript.

Załóżmy, że mamy taką oto czystą stronę HTML:

<!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>Pierwsza strona</title>
	</head>
	<body>
	</body>
</html>

Dołączenie skryptu API

Pierwszą rzeczą, którą trzeba zrobić jest dołączenie skryptu API. Między linijką 6 i 7 należy wstawić następujący tag:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=XXX" type="text/javascript"></script>

gdzie XXX to tzw. API key. Klucz ten można wygenerować za darmo na tej stronie. 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).

Uwaga! Od marca 2009, obowiązkowe jest dołączenie parametru &sensor=true lub &sensor=false. Z pierwszego należy skorzystać, gdy tworzona przez nas aplikacja ma umożliwiać geolokalizację na podstawie sygnału GPS. W pozostałych przypadkach należy ustawić wartość parametru na false. Ponieważ żaden z przykładów na stronie nie jest przeznaczony na urządzenia przenośne i nie wykorzystuje tym samym możliwości określenia pozycji za pomocą sygnału GPS, wszystkie posiadają wartość parametru sensor ustawioną na false.

Wstawienie obiektu mapy

Teraz należy utworzyć 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 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: 300px; border: 1px solid black; background: gray;'>
<!-- tu będzie mapa -->
</div>

Jeśli zmienisz id obiektu z mapą, pamiętaj o uaktualnieniu pierwszego parametru funkcji GMap2 (patrz następny krok).

Zainicjowanie mapy

Pozostał ostatni krok: zainicjowanie mapy. W celu inicjacji tworzymy w JavaScript nowy obiekt klasy GMap2 z odpowiednimi parametrami, a następnie centrujemy mapę na wybranych współrzędnych i przy zadanym poziomie zoom

<script type='text/javascript'>  
function mapaStart()  
{  
    if(GBrowserIsCompatible())  // sprawdzamy, czy przeglądarka jest kompatybilna  
    {  
        // tworzymy nowy obiekt mapy, i umieszczamy go w elemencie blokowym o ID "mapka"  
        var mapa = new GMap2(document.getElementById("mapka"));  
        // centrujemy mapę w okolicy Szczecina na poziomie zoom = 10  
        mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);  
    }  
}  
</script>

W linijce 4 sprawdzamy, czy przeglądarka jest kompatybilna i potrafi wyświetlić mapę
W linijce 7 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')
W linijce 9 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.
Zoom jest podawany jako liczba od 0 do 19, gdzie 19 to najbliższe możliwe przybliżenie.
Funkcję mapaStart() będziemy wywoływać przy załadowaniu strony poprzez podłączenie jej do zdarzenia onload w tagu body, a do zdarzenia onunload dodamy funkcję GUnload(), zwalniającą pamięć, zajętą przez mapę (<body onload="mapaStart()" onunload="GUnload()">).

Cały kod

Cały kod wygląda następująco:

<!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>Pierwsza strona</title>   
		<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=TUTAJ TWÓJ KLUCZ DO API' type='text/javascript'></script> 
    </head>   
    <body onload='mapaStart()' onunload='GUnload()'>   
	<script type='text/javascript'>
	function mapaStart()
	{
		if(GBrowserIsCompatible()) 	// sprawdzamy, czy przeglądarka jest kompatybilna
		{
			// tworzymy nowy obiekt mapy, i umieszczamy go w elemencie blokowym o ID "mapka"
			var mapa = new GMap2(document.getElementById("mapka"));
			// centrujemy mapę w okolicy Szczecina na poziomie zoom = 10
			mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);
		}
	}
	</script>
	<div id='mapka' style='width: 700px; height: 300px; border: 1px solid black; background: gray;'>
	<!-- tu będzie mapa -->
	</div>
    </body>   
</html>

Kliknij na poniższy link, by zobaczyć efekt działania powyższego kodu. Aby wyświetlić pełny kod, kliknij na mały napis na szaro pod linkiem, lub włącz przykład i pokaż źródło strony: przykład 1 pokaż kod przykładu

Uwagi

Mapę można przesuwać, ale jej poziom zbliżenia oraz rodzaj (hybryda/satelita/mapa) pozostają niezmienne. W jednej z następnych lekcji zobaczysz, jak umożliwić osobie oglądającej większą interakcję i kontrolę nad mapą.
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. Każdemu z czterech trybów przypada odpowiednia stała: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP oraz G_PHYSICAL_MAP. Aby mapa uruchomiła się w wybranym trybie, dodaj za utworzeniem mapy poniższy fragment kodu (w miejsce G_HYBRID_MAP można wstawić dowolną z czterech w/w stałych):
```
mapa.setMapType(G_HYBRID_MAP);
```
Alternatywnie, możesz też użyć opcjonalnego, trzeciego argumentu funkcji setCenter(), którym jest typ mapy:
```
mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10,G_HYBRID_MAP);   
```

Zobacz pełny kod oraz wynik jego działania w przykładzie 2: przykład 2 pokaż kod przykładu

Zmiana trybu mapy, przybliżenia oraz przesuwanie przez użytkownika

W kolejnych częściach kursu opisane są sposoby, umożliwiające wprowadzenie interakcyjności do mapy.

Skąd wziąć współrzędne?

Do precyzyjnego opisania położenia geograficznego na mapach w Google używane są standardowe współrzędne geograficzne w systemie WGS84. Szerokość geograficzna przyjmuje wartości od -90 (północ) do 90 (południe), a długość od -180 do 180, gdzie 0 to linia, przechodząca przez Greenwich. Jeśli nie wiesz, skąd brać współrzędne interesujących Cię miejsc (np. jaką współrzędną ma siedziba firmy lub pewien POI, to warto skorzystać z porad, przedstawionych na tej stronie: Skąd brać współrzędne?

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Dodawanie znaczników na mapę

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Poznaj Google Maps API

Mapa Google Maps na Twojej stronie www!

www.gmapsapi.com

Informacje o artykule