www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Pierwsza mapa

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy kategorii

Witaj w pierwszym odcinku kursu, omawiającego sposoby użycia oraz zastosowania i funkcjonalności Google Maps API v3. 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

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 API3:

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/api/js?sensor=false" type="text/javascript"></script>

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: 500px; border: 1px solid black; background: gray;">
<!-- tu będzie mapa -->
</div>

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

Zainicjowanie mapy

Pozostał ostatni krok: zainicjowanie mapy. W celu inicjacji 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>  
  • W 14 linijce 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ą.
  • W linijce 15 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. O pozostałych trybach mapy dowiesz się z następnych części kursu.
  • W linijce 20 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()">).

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" />      
		<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>   

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 1pokaż kod przykładu

Uwagi

  • Mapa domyślnie posiada kontrolki i interfejs, przypominający mapę na stronie maps.google.com. W jednej z następnych lekcji zobaczysz, jak umożliwić osobie oglądającej 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, podmień w poprzednim przykładzie linię mapTypeId: google.maps.MapTypeId.ROADMAP na wybraną przez siebie, na przykład mapTypeId: google.maps.MapTypeId.HYBRID dla mapy hybrydowej.

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ł:

Geokodowanie adresów

API v3

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)


Dodawanie znaczników na mapę

API v3

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Wczytywanie danych z pliku XML

API v3

Kurs podstaw cz. X: Omówienie wczytywania danych z pliku XML za pomocą AJAXa


Wyświetlanie informacji na mapie

API v3

Kurs podstaw cz. V: Dodawanie tekstu i obrazków w dymkach informacyjnych



Dyskusja, komentarze