Poznaj Google Maps API - Dodawanie znaczników na mapę

Dodawanie znaczników na mapę

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 1 pokaż 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 2 pokaż 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.

Uwagi

Z lekcji trzeciej dowiesz się, jak tworzyć markery o innych ikonkach niż ta standardowa

Przejdź do kolejnej części kursu

Następna część kursu jest w opracowaniu. Możesz powrócić do poprzedniej części (Pierwsza mapa).

Polecane artykuły

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

Kategorie markerów i polilinii (uaktualnione)
Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie
kliknij by przeczytać
- data dodania: 2009-11-28
- poziom trudności:
- popularność:
Dodawanie markerów przez użytkownika
Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów
kliknij by przeczytać
- data dodania: 2009-07-23
- poziom trudności:
- popularność:
Wyświetlanie informacji na mapie
Kurs podstaw cz. V: Obsługa okienek informacyjnych InfoWindow jako sposób prezentacji treści na mapie
kliknij by przeczytać
- data dodania: 2010-01-12
- poziom trudności:
- popularność:
Pierwsza mapa
Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować
kliknij by przeczytać
- data dodania: 2009-11-11
- poziom trudności:
- popularność:

Feedback

Dziękujemy za podzielenie się opinią.

Prosimy o podzielenie się swoją opinią o tym artykule.
Oceń ten artykuł w skali 1-7, gdzie 1 to zupełnie się nie zgadzam, a 7 to całkowicie się zgadzam.

	1	2	3	4	5	6	7
Artykuł jest przydatny
Artykuł jest zrozumiały
Artykuł rozwiązał mój problem

Dodatkowe komentarze

Jeśli chcesz otrzymać odpowiedź, nie zapomnij podać swojego adresu e-mail w powyższym polu.

Nazw zastrzeżonych użyto w celu identyfikacji produktu oraz w celach informacyjnych. Autor strony nie jest związany z firmą Google. Zawartość strony, w tym teksty i obrazki są chronione prawem autorskim, i należą do autora strony, o ile nie stwierdzono inaczej. Autor nie odpowiada za straty, jakie może nieść szczególnie niewłaściwe użycie API. Strona używa poprawnego języka XHTML STRICT i CSS. Autor dołożył wszelkich starań w celu zapewnienia poprawności działania skryptów, lecz nie może zapewnić, że są one wolne od błędów. Strona jest monitorowana przez oprogramowanie do generowania statystyk Piwik. Copyright © 2007-2009 Poznaj Google Maps API

Google Maps API - kursy, przykłady, tutoriale i porady

http://gmapsapi.com

Dodawanie znaczników na mapę

Stworzenie markera

Umieszczenie markera na mapie

Niektóre przydatne opcje markerów

Przykład 1

Przykład 2

Uwagi

Uwagi

Przejdź do kolejnej części kursu

Polecane artykuły

Kategorie markerów i polilinii (uaktualnione)

Dodawanie markerów przez użytkownika

Wyświetlanie informacji na mapie

Pierwsza mapa

Feedback