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.

Zmiana domyślnej ikony znacznika

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy kategorii

W ostatniej częsci kursu pokazano, jak łatwo dodać na mapę marker. Co więcej, marker może mieć dowolnie wybraną ikonę, spełniającą funkcję informacyjną o znaczeniu danego miejsca.

Oto przykład, demonstrujący sposób definiowania ikonki: przykład 1pokaż kod przykładu

<!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(opcjeMarkera)
			{
				opcjeMarkera.map = mapa;
				var marker = new google.maps.Marker(opcjeMarkera);
			}
			
			function mapaStart()  
			{  
				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); 
			
				// wspólne cechy ikon
				var rozmiar = new google.maps.Size(32,32);
				var rozmiar_cien = new google.maps.Size(59,32);
				var punkt_startowy = new google.maps.Point(0,0);
				var punkt_zaczepienia = new google.maps.Point(16,16);
				
				// ikonki
				var ikona1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);
				var ikona2 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon23.png", rozmiar, punkt_startowy, punkt_zaczepienia);
				var ikona3 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon13.png", rozmiar, punkt_startowy, punkt_zaczepienia);
				
				var cien1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
				var cien2 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon23s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
				var cien3 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon13s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
				
				dodajMarker({position: new google.maps.LatLng(53.4203,14.7011), title: 'Restauracja #1', icon: ikona1, shadow: cien1});
				dodajMarker({position: new google.maps.LatLng(53.3902,14.7202), title: 'Restauracja #2', icon: ikona1, shadow: cien1});
	            dodajMarker({position: new google.maps.LatLng(53.4101,14.6033), title: 'Myjnia', icon: ikona2, shadow: cien2});
	            dodajMarker({position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3, shadow: cien3});
			
			}  
		-->
		</script>   
		<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">   
		<!-- tu będzie mapa -->   
		</div>   
		<p id="info">
			Zdefiniowano kilka ikonek
		</p>
    </body>      
</html>   
  • W liniach 46. - 51. dodawane są markery na mapę. Każdy z nich (między nawiasami klamrowymi) ma określony parametr icon, wskazujący na rodzaj ikony, który należy użyć, oraz shadow, wskazujący na zdefiniowany cień (jeżeli zostanie pominięty, to ikona jest wyświetlana bez cienia - często zwiększa to wydajność mapy). Dozwolone obrazy dla ikon i cienia to te, które zadeklarowaliśmy wcześniej (ikona1,ikona2,ikona3,cien1,cien2,cien3). Jeżeli nie przypiszemy markerowi żadnej ikony, to zostanie użyta domyślna "czerwona łezka".

Zwróc uwagę na sposób definiowania ikony:

var rozmiar = new google.maps.Size(32,32);
var rozmiar_cien = new google.maps.Size(59,32);
var punkt_startowy = new google.maps.Point(0,0);
var punkt_zaczepienia = new google.maps.Point(16,16);

var ikona1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);
/* wycięte */
var cien1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

W powyższym fragmencie kodu następuje zadeklarowanie kilku wspólnych parametrów dla stosowanych ikon (można oczywiście dla każdej ikony zadeklarować inne wartości, ale w naszym przykładzie wszystkie te wartości są takie same, więc można użyć wspólnych wartości)

  • W pierwszej linijce na powyższym listingu definiujemy rozmiar ikony. Każda ze stosowanych ikon będzie miała 32 na 32 piksele.
  • W kolejnej linii robimy to samo, tylko że dla obrazka, reprezentującego cień pod ikoną.
  • W trzeciej linijce ustawiliśmy punkt startowy. Ta wartość jest szczególnie przydatna, jeśli w jednym pliku mamy kilka ikon. W większości prostych i średniozaawansowanych zastosowań, pożądane jest ustawienie punktu startowego na (0,0).
  • w czwartej linijce ustawiono punkt zaczepienia. Punkt zaczepienia to taki punkt, który API traktuje jako "centrum" ikony. Przykładowo, marker w kształce łezki jest domyślnie zaczepiony tak, by jego "stopka" wskazywała pożądany punkt wstawienia. Współrzędne tej stopki nie pokrywają się jednak z punktem (0,0) ikony, dlatego w tym wypadku stosujemy punkt zaczepienia - podaliśmy go jako punkt w lokalnym układzie współrzędnych dla ikony odległy o 16 pikseli od lewej krawędzi i 16 pikseli od krawędzi górnej. Ponieważ ikona ma rozmiar 32x32, to ustawienie punktu zaczepienia na 16x16 spowoduje, że będzie on po prostu w środku.

Zwróć uwagę, że na razie deklarowaliśmy ogólne cechy ikon. Aby ikona posiadała te cechy, konieczne jest poinstruowanie API, że tak ma zrobić. Robi się to za pomocą konstruktora obiektu MarkerImage, który przyjmuje 4 argumenty (w tym pierwszy obowiązkowy) - są to w kolejności:

  • adres URL pliku graficznego ikony
  • rozmiar Size
  • punkt startowy Point
  • punkt zaczepienia Point

Obiekty klasy MarkerImage są stosowane zarówno do zdeklarowania ikony jak i jej cienia (sprawdź kod przykładu 1).

Została ostatnia, drobna rzecz. Stworzona w ten sposób ikona sobie istnieje gdzieś w pamięci, lecz by stała się ikoną markera, konieczne jest napisanie odpowiedniej instrukcji dla API. W poprzedniej lekcji wspomniano, że jednym z możliwych parametrów, jakie można przekazać do konstruktora markerów jest ikona. Aby zmienić domyślną ikonę dowolnego markera, należy dodać ciąg icon: nazwa_ikony do opcji markera, gdzie nazwa_ikony to jakaś zmienna, przechowująca zadeklarowaną wcześniej ikonkę. Analogicznie, dla cienia należy skorzystać z konstrukcji shadow: nazwa_cienia. Przykładowo, odpowiednia instrukcja może wyglądać następująco:

var opcjeMarkera = {map: mapa, position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3, shadow: cien3}

przykład 1pokaż kod przykładu

Przykład

Na potrzeby przykładu stworzyłem i ponazywałem odpowiednio trzy ikonki:

ikona
ikony/polska.png
ikona
ikony/niemcy.png
ikona
ikony/czechy.png

Teraz naniesiemy je na mapę, by oznaczały gdzie leżą państwa. Wszystko, co jest potrzebne do wykonania tego zadania zostało w zasadzie pokazane wcześniej:

// wspólne cechy ikon
var rozmiar = new google.maps.Size(30,23);
var punkt_startowy = new google.maps.Point(0,0);
var punkt_zaczepienia = new google.maps.Point(15,12);

// flagi
var polska = new google.maps.MarkerImage("http://gmapsapi.com/ikony/polska.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var niemcy = new google.maps.MarkerImage("http://gmapsapi.com/ikony/niemcy.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var czechy = new google.maps.MarkerImage("http://gmapsapi.com/ikony/czechy.png", rozmiar, punkt_startowy, punkt_zaczepienia);

Jest to niemal ten sam kod co wyżej, różne są tylko adresy URL do ikon oraz ich parametry (rozmiar, zaczepienie, punkt startowy)

Zobacz przykład 2 aby obejrzeć kod źródłowy oraz jego efekt
przykład 2pokaż kod przykładu

Uwagi

  • Jeśli chcesz uzyskać efekt przezroczystości z kanałem alpha, użyj ikon w plikach w formacie PNG z zapisanym kanałem alpha
  • Setki gotowych do użycia ikon, kompatybilnych z Google Maps API znajdziesz w czwartej części kursu API v3

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Popularne, darmowe ikony dla markerów

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ć


Dodawanie znaczników na mapę

API v3

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


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)