Jak zdefiniować własny marker?
Docelowo definicja obrazka do markera jest tworzona w obiekcie GIcon. Z kolei obiekt GIcon jest podawany jako parametr icon w obiekcie GMarkerOptions, który jest podawany (opcjonalnie) jako drugi parametr w konstruktorze GMarker. Parametry w GIcon, które definiują obrazek to:
- image - adres obrazka markera podawany jako ciąg znaków (np. images/marker.png)
- shadow - adres obrazka cienia podawany jako ciąg znaków
Poniżej przykład wygenerowania obrazka (korzystając z Google Charts API):
var url = "http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|FFFF00";
var myIcon = new GIcon(G_DEFAULT_ICON, url);
marker = new GMarker(new GLatLng(51.107885,17.038538), {icon: myIcon});
map.addOverlay(marker);
W przypadku ikon o większych wymiarach można zastosować preloading obrazków:
var url = "http://chart.apis.google.com/chart?chst=d_map_spin&chld=1.2|30|FFFF88|10|_|foo|bar";
var image = new Image();
image.onload = function() {
var myIcon = new GIcon(G_DEFAULT_ICON, url);
myIcon.iconSize = new GSize(image.width, image.height);
marker = new GMarker(new GLatLng(51.107885,17.038538), {icon: blueIcon});
map.addOverlay(marker);
}
image.src = url;Google Charts API
Pierwszym rozwiązaniem jest zastosowanie Google Charts API. W parametrach podajemy adres URL z podanymi w dokumentacji ustawieniami. Istnieje możliwość zdefiniowania następujących markerów:- zwykły marker - możliwość zdefiniowania koloru markera oraz litery (d_map_pin_letter) lub obrazka (d_map_pin_icon)
- marker pochylony w prawo lub w lewo lub z gwiazdką (d_map_xpin_letter, d_map_xpin_icon) - modyfikacje jak powyżej
- marker dowolnej wielkości (d_map_spin) - możliwość definicji koloru, kąta obrotu oraz wpisanego tekstu - w tym rozmiaru oraz pogrubienia
Trzy typy markerów są szczegółowo opisane w dokumentacji Google:
- zwykły marker - http://code.google.com/intl/pl-PL/apis/chart/docs/gallery/dynamic_icons.html#plain_pin
- zaawansowany marker - http://code.google.com/intl/pl-PL/apis/chart/docs/gallery/dynamic_icons.html#special_pins
- marker dowolnej wielkości - http://code.google.com/intl/pl-PL/apis/chart/docs/gallery/dynamic_icons.html#scalable_pins
Ikony dostępne w Google Earth
Google oferuje dostęp do ikon, które są także dostępne do przeglądania (może być, że w niepełnym składzie) w Google Earth w folderze kształtów (np. C:\Program Files\Google\Google Earth\plugin\res\shapes). Pełniejsze listy obrazków są dostępne m.in. tutaj:- http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
- http://gmapsapi.com/poradnik/103_popularne_darmowe_ikony_dla_markerow.html
W drugim linku do ikon są dołączone bezpośrednio adresy URL. W pierwszym adres obrazków można wyciągnąć ze źródła strony.
Obrazki dołączamy do mapek podobnie jak w przypadku Google Charts API - adres URL w polach image oraz shadow w obiekcie GIcon.
Gotowe zestawy ikon do markerów oraz inne generatory ikon
Alternatywne zestawy ikon są udostępniane na różnych licencjach. Jedna z największych kolekcji to map icons collection na google code. Kolekcja jest także co jakiś czas uaktualniana więc warto tam zaglądać, czy nie pojawiły się nowości. Spis innych starszych i mniejszych kolekcji jest w dziale Static Icons na mapki.com.Inne generatory ikon warte uwagi to:
- przygotowany przez team Google'a - MapIconMaker wchodzący w skład biblioteki gmaps-utility-library-dev - kreator jest dostępny na stronie projektu: http://gmaps-utility-library-dev.googlecode.com/svn/tags/mapiconmaker/1.1/examples/markericonoptions-wizard.html - ma podobne możliwości jak Google Charts API w zakresie zwykłych markerów (nie ma możliwości tworzenia markera o dowolnej wielkości), a dodatkowo umożliwia tworzenie tzw. flat markers - czyli tekstu w wypełnionym kole (przykłady na obrazku poniżej)
- mapIcon Factory - przygotowany przez Cartosoft pozwala wykorzystać 30 kształtów markerów, zbiór różnych ikon uszeregowanych w kategorie, itd.; wygenerowane obrazki zaciąga się w postaci paczki zip - niestety płatne 19.95 funtów na rok
Miłej zabawy z markerami!
Brak komentarzy:
Prześlij komentarz