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 API w wersji 2

« powrót do listy kategorii

Poprzedni przykład pokazał, 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' />      
        <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);   
            
			// deklaracja ikonki numer jeden
			var ikona1 = new GIcon();
			ikona1.image = "http://maps.google.com/mapfiles/kml/pal2/icon38.png";
			ikona1.shadow = "http://maps.google.com/mapfiles/kml/pal2/icon38s.png";
			ikona1.iconSize = new GSize(32, 32);
			ikona1.infoWindowAnchor = new GPoint(16,16);
			ikona1.iconAnchor = new GPoint(16,16);
			ikona1.shadowSize = new GSize(59, 32);
			
			// deklaracja ikonki numer dwa
			var ikona2 = new GIcon(ikona1);
			ikona2.image = "http://maps.google.com/mapfiles/kml/pal4/icon23.png";
			ikona2.shadow = "http://maps.google.com/mapfiles/kml/pal4/icon23s.png";
			
			// deklaracja ikonki numer trzy
			var ikona3 = new GIcon(ikona1);
			ikona3.image = "http://maps.google.com/mapfiles/kml/pal3/icon13.png";
			ikona3.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon13s.png";
			
            // dodamy kilka losowych markerów   
            dodajMarker(53.4203,14.7011,{title: 'Restauracja #1', icon: ikona1});
			dodajMarker(53.3902,14.7202,{title: 'Restauracja #2', icon: ikona1});
            dodajMarker(53.4101,14.6033,{title: 'Myjnia', icon: ikona2});
            dodajMarker(53.4014,14.5104,{title: 'Tu byłem 6 razy', icon: ikona3});
        }   
    }   
       
    function dodajMarker(lat,lon,opcje)   
    {   
        // obiekt mapa jest obiektem globalnym!   
        mapa.addOverlay(new GMarker(new GLatLng(lat,lon),opcje));   
    }   
       
    </script>   
    <div id='mapka' style='width: 700px; height: 300px; border: 1px solid black; background: gray;'>   
    <!-- tu będzie mapa -->   
    </div>   
    </body>      
</html>
  • W liniach 40. - 43. 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ć. Dozwolone są te, które zadeklarowaliśmy (ikona1,ikona2,ikona3) oraz domyślny marker - wówczas używamy stałej G_DEFAULT_ICON.

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

// deklaracja ikonki numer jeden
var ikona1 = new GIcon();
ikona1.image = "http://maps.google.com/mapfiles/kml/pal2/icon38.png";
ikona1.shadow = "http://maps.google.com/mapfiles/kml/pal2/icon38s.png";
ikona1.iconSize = new GSize(32, 32);
ikona1.infoWindowAnchor = new GPoint(16,16);
ikona1.iconAnchor = new GPoint(16,16);
ikona1.shadowSize = new GSize(59, 32);
			
// deklaracja ikonki numer dwa
var ikona2 = new GIcon(ikona1);
ikona2.image = "http://maps.google.com/mapfiles/kml/pal4/icon23.png";
ikona2.shadow = "http://maps.google.com/mapfiles/kml/pal4/icon23s.png";
  • W liniach 22. - 28. zawarta jest deklaracja jednego rodzaju ikony:
    • linia 22 - stworzenie nowego obiektu ikona1, będącego ikonką
    • linia 23 - przypisanie adresu URL do obrazka z ikonką
    • linia 24 - przypisanie adresu URL do obrazka z cieniem znacznika
    • linia 25 - przypisanie rozmiaru ikony (wpierw wysokość, póżniej szerokość, podane w pikselach i przechowywane w obiekcie klasy GSize)
    • linia 26 - przypisanie zaczepienie okienka informacyjnego (zobacz następną część kursu)
    • linia 27 - przypisanie punktu zaczepienia ikony
    • linia 28 - przypisanie rozmiaru cienia
  • W liniach 30. - 32. oraz 35. - 37. zadeklarowano jeszcze dwa typy ikon. Różni się ich konstruktor - podanie utworzonej ikony jako argument dla funkcji GIcon() powoduje, że wszystkie właściwości tej ikony są kopiowane dla tworzonego nowego typu. Dzięki temu tym razem deklarujemy jedynie te właściwości, które się różnią.

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 pokazane wcześniej, więc komentarz ograniczę do deklaracji flagi jednego z państw:

	// deklaracja ikonki Polski
	var polska = new GIcon();
	polska.image = "http://gmapsapi.com/ikony/polska.png";
	polska.iconAnchor = new GPoint(15, 12); // punkt zaczepienia w środku (30/2 = 15, 23/2 = 12.5)
	polska.shadow = "";
	polska.infoWindowAnchor = new GPoint(15,12);
	polska.iconSize = new GSize(30, 23);

W linijce 26 nadałem pusty string wartości odpowiadającej ścieżce URL do pliku z cieniem, by go nie tworzyć. Z kolei punkt zaczepienia w właściwości .iconAnchor ustaliłem na 15,12, co w przybliżeniu odpowiada środkowi prostokąta o wymiarach 30,23 (ostatnia linijka).

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

Uwagi

  • Aby wyłączyć cień, zdefiniuj ścieżkę do niego jako pusty string ('')
  • Jeśli chcesz uzyskać efekt przezroczystości z kanałem alpha, użyj ikon w plikach w formacie PNG z zapisanym kanałem alpha
  • Aby ustawić punkt zaczepienia ikony, ustaw właściwość .iconAnchor na nowy punkt zaczepienia klasy GPoint(x,y), gdzie (x,y) to współrzędne punktu zaczepienia.
    Przykład: ikona3.iconAnchor = new GPoint(6, 20); ustawi punkt zaczepienia w punkcie (6,20).
  • Setki gotowych do użycia ikon, kompatybilnych z Google Maps API znajdziesz w czwartej części kursu

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ł:

Dodawanie markerów przez użytkownika

API v2

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


Kategorie markerów i polilinii

API v2

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


Pierwsza mapa

API v2

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


Dodawanie znaczników na mapę

API v2

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



Opinie, sugestie?

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.