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

« powrót do listy poradników

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 2. - 8. zawarta jest deklaracja jednego rodzaju ikony:
    • linia 2 - stworzenie nowego obiektu ikona1, będącego ikonką
    • linia 3 - przypisanie adresu URL do obrazka z ikonką
    • linia 4 - przypisanie adresu URL do obrazka z cieniem znacznika
    • linia 5 - przypisanie rozmiaru ikony (wpierw wysokość, póżniej szerokość, podane w pikselach i przechowywane w obiekcie klasy GSize)
    • linia 6 - przypisanie zaczepienie okienka informacyjnego (zobacz następną część kursu)
    • linia 7 - przypisanie punktu zaczepienia ikony
    • linia 8 - przypisanie rozmiaru cienia
  • W liniach 10. - 12. oraz 15. - 17. 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 5 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ł:

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