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ę

« powrót do listy kategorii

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 GMarker. Ogólna składnia wygląda następująco:

var marker = new GMarker(punkt,opcje?);

gdzie punkt to obiekt klasy GLatLng, przechowujący współrzędne, a opcje to opcjonalny parametr, zawierający dodatkowe parametry markera. Zostaną one wyjaśnione za chwilę.

Umieszczenie markera na mapie

Aby wstawić utworzony marker na mapę (obiekt klasy GMarker), należy posłużyć się funkcją addOverlay() obiektu mapy:

mapa.addOverlay(obiektDoWstawienia);

Funkcja przyjmuje jeden argument w postaci obiektu, który należy dodać na mapę.

Fragment działającego kodu, dodający znacznik na mapę wyglądać może następująco:

var punkt = new GLatLng(53.400,14.400); // definiujemy punkt o współrzędnych 53.400,14.400
var marker = new GMarker(punkt); // drugi argument (opcje) można pominąć, tak jak tutaj
mapa.addOverlay(marker);

Niektóre przydatne opcje markerów

Opcjonalny parametr pozwala ustawić kilka interesujących opcji, z których 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)
  • title - określa tekst, który pojawi się po najechaniu myszką nad marker
  • icon - określa ikonę, która zostanie użyta dla markera

Opcje ustawia się za pomocą opcjonalnego drugiego argumentu przy tworzeniu obiektu markera w formacie:
{nazwa_opcji_1: wartość_opcji_1, nazwa_opcji_2: wartość_opcji_2 .... , nazwa_opcji_n: wartość_opcji_n}

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' />   
        <title>Przykład 37.1</title>   
		<!--skrypty-->
		<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRlez1kYtfYyIayPXhVYvqRXxDfwRTG4Nb3AzYoqs59diCfw0oKlXXRrg' type='text/javascript'></script> 
    </head>   
    <body onload='mapaStart()' onunload='GUnload()'>   
	<script type='text/javascript'>
	<!-- 
		var mapa; // obiekt globalny
		function mapaStart()  
		{  
		    if(GBrowserIsCompatible())
		    {  
				// tworzymy mapę satelitarną i centrujemy w okolicy Szczecina na poziomie zoom = 10
				mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_SATELLITE_MAP]});
				mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);
		    
				// stworzenie markera
				var punkt  = new GLatLng(53.400,14.600);
				var marker = new GMarker(punkt,{title: 'Pierwszy marker'});
				
				// dodanie markera na mapę
				mapa.addOverlay(marker);
		    }   
		}  
	-->
	</script>
	<div id='mapka' style='width: 700px; height: 500px; border: 1px solid black; background: gray;'>
	<!-- tu będzie mapa -->
	</div>
    </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' />   
        <title>Pierwsza strona</title>   
		<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRlez1kYtfYyIayPXhVYvqRXxDfwRTG4Nb3AzYoqs59diCfw0oKlXXRrg' type='text/javascript'></script> 
    </head>   
    <body onload='mapaStart()' onunload='GUnload()'>   
	<script type='text/javascript'>
	var mapa; // obiekt globalny
	function mapaStart()
	{
		if(GBrowserIsCompatible())
		{
			// tworzymy mapę satelitarną i centrujemy w okolicy Szczecina na poziomie zoom = 10
			mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_SATELLITE_MAP]});
			mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);
			
			// 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,{}); 
		}
	}
	
	function dodajMarker(lat,lon,opcje)
	{
		// obiekt mapa jest obiektem globalnym!
		// tworzymy marker z współrzędnymi i opcjami z argumentów funkcji dodajMarker
		var marker = new GMarker(new GLatLng(lat,lon),opcje);
		
		// dodajemy marker na mapę
		mapa.addOverlay(marker);
	}
	
	</script>
	<div id='mapka' style='width: 700px; height: 300px; border: 1px solid black; background: gray;'>
	<!-- tu będzie mapa -->
	</div>
    </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

  • W powyższym przykładzie dodana została funkcja dodajMarker, w celu uproszczenia zapisu dodawania pojedynczego markera.
  • Jak dotąd, nie została użyta opcja icon. Użycie ikon będzie tematem trzeciej części kursu.
  • Z lekcji trzeciej dowiesz się, jak tworzyć markery o innych ikonkach niż ta standardowa
  • Im więcej dodanych w ten sposób markerów na mapę, tym mniejsza wydajność i prędkość działania aplikacji. Dodawanie pojedynczych markerów funkcją mapa.addOverlay() mija się z celem przy liczbie >=100. Zdecydowanie wydajniejszym rozwiązaniem jest postawienie na managera markerów (GMarkerManager), który został opisany w dziale Powiększenie okna informacyjnego

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Zmiana domyślnej ikony znacznika

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Kategorie markerów i polilinii

API v2

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


Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Dodawanie znaczników na mapę

API v3

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


Wyświetlanie listy widocznych markerow

API v2

Sposób na wyświetlenie listy widocznych w danym momencie markerów i ich opisów