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.

Dodawanie znaczników na mapę

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

API Google Maps umożliwia dodania do mapy w teorii* nieograniczonej liczby obiektów punktowych - znaczników. Umożliwiwają one oznaczenie na mapie pewnych miejsc. Na co będą wskazywać jest zależne jedynie od Twojej wyobraźni. Znaczniki - zwane inaczej markerami - posiadają wiele cech, które czynią je bardzo użytecznymi. W tej części pokazany zostanie sposób tworzenia i wstawiania ich na mapę.

* - ich liczba ograniczona jest co najwyżej zasobami pamięci komputera

Stworzenie markera

Do stworzenia markera używamy klasy Marker. Ogólna składnia wygląda następująco:

 var marker = new google.maps.Marker(opcje);

gdzie opcje to obiekt, w notacji o składni {nazwa_opcji_1: wartość_opcji_1, nazwa_opcji_2: wartość_opcji_2 .... , nazwa_opcji_n: wartość_opcji_n}, o następującej strukturze:

var opcje = 
{
	position: pozycja_markera,
	map: odwolanie_do_mapy,
	title: tytul_markera
}

gdzie pozycja_markera to pewien punkt LatLng, odwolanie_do_mapy to jak sama nazwa mówi odwołanie do mapy Map, a tytul_markera to zwykły string.

Umieszczenie markera na mapie

W APIv2 marker trzeba było wstawić "ręcznie" na mapę, w APIv3 proces ten jest zautomatyzowany. Fragment działającego kodu, dodający znacznik na mapę wyglądać może następująco:

var punkt = new google.maps.LatLng(53.400,14.400); // definiujemy punkt o współrzędnych 53.400,14.400
var opcjeMarkera = 
{
	position: punkt,
	map: mapa,
	title: 'Pierwszy marker!'
}
var marker = new google.maps.Marker(opcjeMarkera);

Niektóre przydatne opcje markerów

Oprócz standardowych ustawień, w obiekcie opcjeMarkera można ustawić kilka właściwości, które spowodują interesujące działanie markera. Najważniejsze cztery to:

  • 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)
  • visible - jeśli false, to marker nie jest widoczny
  • icon - określa ikonę, która zostanie użyta dla markera (zostanie to wyjaśnione później)

Przykład 1

Stwórzmy nasz pierwszy marker. Pełny 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>Przykład</title>      
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>    
    </head>      
    <body onload="mapaStart()">      
		<script type="text/javascript">   
		<!-- 
			var mapa; // obiekt globalny
			function mapaStart()  
			{  
				// tworzymy mapę satelitarną i centrujemy w okolicy Szczecina na poziomie zoom = 10
				var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
				var opcjeMapy = {
					zoom: 10,
					center: wspolrzedne,
					mapTypeId: google.maps.MapTypeId.SATELLITE
				};
				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 
				
				// stworzenie markera
				var punkt  = new google.maps.LatLng(53.400,14.600);
				var opcjeMarkera =
				{
					position: punkt,
					map: mapa,
					title: "Pierwszy marker!"
				}
				var marker = new google.maps.Marker(opcjeMarkera);
			}  
		-->
		</script>   
		<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">   
		<!-- tu będzie mapa -->   
		</div>   
		<p id="info">
			Pierwszy marker, stworzony w Google Maps API v3
		</p>
    </body>      
</html>  

Zobacz efekt działania w przykładzie 1: przykład 1pokaż kod przykładu

Przykład 2

W przykładzie 2 na mapę wstawimy 4 markery. Napisana zostanie też funkcja do dodawania markerów - w kolejnych lekcjach zobaczysz, że upraszcza to kod oraz ułatwia implementację pozostałych rzeczy.

<!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>Przykład</title>      
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>    
    </head>      
    <body onload="mapaStart()">      
		<script type="text/javascript">   
		<!-- 
			var mapa; // obiekt globalny
			
			function dodajMarker(lat,lon,opcjeMarkera)
			{
				// tworzymy marker z współrzędnymi i opcjami z argumentów funkcji dodajMarker
				opcjeMarkera.position = new google.maps.LatLng(lat,lon);
				
				opcjeMarkera.map = mapa; // obiekt mapa jest obiektem globalnym!
				var marker = new google.maps.Marker(opcjeMarkera);
			}
			
			function mapaStart()  
			{  
				var opcjeMapy = 
				{
					center: new google.maps.LatLng(53.41935400090768,14.58160400390625),
					zoom: 10,
					mapTypeId: google.maps.MapTypeId.SATELLITE
				}
				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 
				
				// ten marker będzie przesuwalny			
				dodajMarker(53.400,14.700,{title: 'Przeciągnij mnie', draggable: true});  
				
				// ten marker nie będzie klikalny
				dodajMarker(53.400,14.600,{title: 'Jestem nieklikalny', clickable: false});  
				
				// to będzie zwykły marker z tooltipem
				dodajMarker(53.400,14.500,{title: 'Jestem zwykłym markerem'});  
				
				// ...a to zwykły bez tooltipa
				dodajMarker(53.400,14.400,{}); 
			}  
		-->
		</script>   
		<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">   
		<!-- tu będzie mapa -->   
		</div>   
		<p id="info">
			Na mapę wstawiono cztery markery o różnych cechach. Pierwszy od lewej to marker zwykły, bez żadnego opisu. Drugi marker posiada opis (po najechaniu myszą). Trzeci marker jest nieklikalny - aplikacja nie przechwytuje kliknięć na nim. Ostatni marker jest przesuwalny - wciśnij i przytrzymaj lewy przycisk myszy na nim, a następnie przeciągnij i upuść w dowolnym miejscu.
		</p>
    </body>      
</html>   			

Powyższy przykład dostępny jest jako przykład 2
przykład 2pokaż kod przykładu

Na mapie pojawiły się cztery markery z czerwoną, domyślną ikonką. Marker:

  • pierwszy od lewej to zwykły marker, bez ustawionych żadnych opcji
  • drugi od lewej to zwykły marker, z ustawionym tytułem (przytrzymaj nad nim mysz, aby zobaczyć efekt)
  • trzeci od lewej to marker, który jest nieklikalny. Kursor nad nim nie przybiera postaci tzw. "łapki", kliknięcie nie generuje żadnych zdarzeń (więcej w kolejnych działach)
  • ostatni marker to marker przesuwalny - kliknij i przytrzymaj lewy klawisz myszy nad markerem a następnie przeciągnij go w dowolne miejsce mapy

Uwagi

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Pierwsza mapa

API v3

Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować


Kategorie markerów i polilinii

API v3

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


Geokodowanie adresów

API v3

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


Pogoda na mapie

API v3

Jak wyświetlić stan pogody przy użyciu Google Maps API?