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'      
    'https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>      
<html xmlns="https://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="https://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: