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.

Dodawanie własnych kontrolek na mapę

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W tym tutorialu dowiesz się, jak dodawać do mapy kontrolki klasy GControl(), które pozostają w niezmienionej pozycji bezwzględnej pomimo przesuwania mapy.

Własna kontrolka wyboru trybu mapy

Modelowym i praktycznym zastosowaniem będzie własna kontrolka, umożliwiająca użytkownikowi wybór trybu wyświetlania mapy.

Kontrolka zmiany trybu mapy

Dodanie nowego obiektu do mapy polega na stworzeniu nowego obiektu, dziedziczącego po GControl(), któremu należy prototypować metodę initialize() (wywoływana automatycznie przez API w momencie dodania kontrolki na mapę). Opcjonalnie można również prototypować funkcję, zwracającą domyślne położenie kontrolki na mapie.

Stworzenie obiektu

Zaczynamy od stworzenia obiektu:

function TypyMapy() {}
TypyMapy.prototype = new GControl();

Zapis ten oznacza, że kontrolka klasy TypyMapy dziedziczy po standardowej kontrolce, dzięki czemu nie musimy zajmować się zaawansowanymi rzeczami, za które odpowie API.

Prototyp inicjalizacji

Teraz prototyp metody initialize():

TypyMapy.prototype.initialize = function(mapa)
{
	var lista 	= document.createElement("ul");
	lista.id	= 'typymapy';
	
	var przycisk1 = document.createElement('li');
	przycisk1.innerHTML = 'satelita';
	przycisk1.title = 'pokaż zdjęcia satelitarne';
	przycisk1.onclick = function() { mapa.setMapType(G_SATELLITE_MAP); return false; };	
	lista.appendChild(przycisk1);	
	this.przycisk1 = przycisk1;
	
	/* w tym miejscu na tej samej zasadzie powinien być kod pozostałych przycisków */
	
	this.mapa = mapa;			
	mapa.getContainer().appendChild(lista);
	return lista;
}

Metoda initialize() przekazuje odwołanie do mapy. Przyda się później, warto je zachować do dalszego użytku (this.mapa = mapa). Na początku tworzymy element listy (może być dowolny obiekt języka HTML, ale w tym wypadku lista będzie najbliższa naszym zamiarom). Liście przypisujemy id, by można ją było stylować za pomocą CSS.

W linii 6 - 11 znajduje się kod, odpowiedzialny za stworzenie pojedynczegop przycisku dla trybu satelitarnego. Najpierw tworzymy element listy (li), ustawiamy jego tekst na SATELITA, a dymek po najechaniu myszy na POKAŻ ZDJĘCIE SATELITARNE (przycisk1.title). Następnie w linii 8 definiujemy, co ma się stać po kliknięciu - mapa ma zmienić tryb wyświetlania na satelitę (stała G_SATELLITE_MAP). Na koniec dodajemy element listy do stworzonej wcześniej listy, a odwołanie do przycisku zapisujemy w celu późniejszego użycia (przedostatnia linijka).

Na tej samej zasadzie tworzymy kolejne przyciski dla pozostałych trybów. Kiedy już wszystkie przyciski zostały stworzone i obiekt listy jest kompletny, dodajemy go do ekranu mapy (odwołanie do niego zwraca metoda getContainer() obiektu mapy). Na koniec koniecznie zwracamy odwołanie do najbardziej zewnętrznego obiektu DOM jaki tworzyliśmy, w tym wypadku do listy (return lista).

Domyślna pozycja

Prototyp funkcji, zwracającej domyślne położenie kontrolki na mapie wygląda następująco:

TypyMapy.prototype.getDefaultPosition = function()
{
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(5, 5));
}

Zapis ten oznacza, że kontrolka będzie wyrównana do prawego, górnego rogu, i oddalona od niego o 5 pikselów w poziomie i 5 pikselów w pionie. Zamiast G_ANCHOR_TOP_RIGHT można wstawić również dowolną z pozostałych: G_ANCHOR_TOP_LEFT, G_ANCHOR_BOTTOM_LEFT i G_ANCHOR_BOTTOM_RIGHT, by wyrównać kontrolkę do innego narożnika.

Stylowanie i zaznaczanie aktywnego przycisku

Na razie nasza kontrolka nie zawiera żadnych informacji o wyglądzie. Zajmiemy się tym za chwilę, najpierw napiszmy funkcję, dzięki której aktywny tryb mapy będzie zawsze wyróżniony:

TypyMapy.prototype.odswiez = function()
{
	if(this.mapa.getCurrentMapType() != G_SATELLITE_MAP)
		this.przycisk1.className = 'nieaktywny';
	else
		this.przycisk1.className = 'aktywny';
		
	/* i tak dalej dla pozostałych przycisków */
}

Metoda odswiez() spowoduje, że funkcja sprawdzi, czy wybrany tryb mapy (uzyskany dzięki this.mapa.getCurrentMapType() - przydaje się odwołanie do mapy, które zapisaliśmy przy inicjalizacji) to G_SATELLITE_MAP (mapa satelitarna), jeśli tak to ustawiamy nazwę klasy przycisku na "aktywny", w przeciwnym wypadku nazwą klasy będzie "nieaktywny". Musi ona zostać wywołana zawsze wtedy, gdy zmieniony zostanie tryb mapy.

Teraz dodamy kontrolkę do mapy:

typymapy = new TypyMapy();
mapa.addControl(typymapy);
GEvent.addListener(mapa,'maptypechanged',function()
{
	typymapy.odswiez();
});

Ten kod musi znaleźć się za inicjalizacją mapy, ale przed jej wycentrowaniem. Zmienna typymapy musi być globalna, należy ją wcześniej zadeklarować. Zwróć uwagę, że zdarzenie maptypechanged odpalane jest przy pierwszym wycentrowaniu mapy, dzięki czemu przyciki zostaną autmatycznie odpowiednio pokolorowane (wraz z zaznaczonym trybem mapy) przy jej starcie.

CSS

Aby całość wyświetlała się mile dla oka, dodamy odrobinę CSS:

#typymapy
{
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 11px;
	list-style: none;
}

#typymapy li
{
	display: block;
	width: 60px;
	text-align: center;
	padding: 2px;
	border: 1px solid black;		
	cursor: pointer;
	float: left;
	margin-left: 2px;
}

#typymapy li.nieaktywny
{

	background: white;
	color: black;
	font-weight: normal;

}

#typymapy li.aktywny
{
	background: black !important;
	color: white;
	font-weight: bold;		
}

#typymapy li:hover
{
	background: #ddd;
}

Efekt

To już wszystko, oto efekt końcowy wraz z pełnym kodem i czterema przyciskami: przykład 1pokaż kod przykładu

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


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Wyszukiwanie markerów as-you-type

API v2

Jak stworzyć wyszukiwanie i filtrowanie markerów as-you-type przy użyciu bazy danych