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.

jQuery i Google Maps

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Tematem tego poradnika będzie aplikacja, wyświetlająca mapę przy użyciu standardowego API, wzbogacona o ciekawe efekty animacji przy użyciu jQuery. W celach demonstracji sposobu współpracy tych dwóch bibliotek, stworzymy własne okno informacyjne do prezentowania informacji na mapie. Więcej informacji o jQuery na oficjalnej stronie: jquery.com.

Przygotowanie

Spakowaną wersję biblioteki jQuery można pobrać z poniższego adresu:
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js. W tym poradniku nie będę zajmował się podstawami jQuery, choć w miarę możliwości będę wyjaśniał, co robi dany kod.

Stworzymy okno, które będzie wyglądało tak:

wygląd okna

Potrzebne do tego będą następujące obrazki:

wygląd okna
stopka, wskazująca aktualnie wybrany marker

przycisk X
przycisk X do zamykania okna

ozdobne tło
ozdobne tło wnętrza okna

Każdy z markerów będzie posiadał kilka własności:

  • opis, zawierający to, co sugeruje nazwa,
  • opcje w postaci notacji JSON, dzięki czemu będzie można modyfikować pewne elementy zachowania okna.

Klasa Okno

Jeden obiekt okna będzie odpowiadał za okna dla wszystkich markerów, podmieniana będzie jedynie jego treść. Okno będzie obiektem typu Okno:

function Okno()
{
	this.latlng = new GLatLng(52.4,17.9);
};  
			
Okno.prototype = new GOverlay();   		

Współrzędne startowe mogą być dowolne, okno i tak na starcie będzie ukryte.

Czas na napisanie standardowych metod initialize, redraw, copy oraz remove:

Okno.prototype.initialize = function(mapa)   
{   
	var div_okno		= $('<div />');
	var div_stopka		= $('<div />');
	var div_tresc 		= $('<div />');
	var div_ikona		= $('<div />');
	var img_zamknij		= $('<img />');
	var h3				= $('<h3 />');
	var p_tresc			= $('<p />');
	
	$(div_okno).attr('id','okno').css('display','none');
	$(div_tresc).attr('class','tresc');
	$(div_ikona).attr('class','ikona').attr('src','http://maps.gstatic.com/intl/pl_ALL/mapfiles/marker.png');
	$(img_zamknij).attr('class','close').attr('src','http://gmapsapi.com/examples/075/x.gif').attr('alt','x').click(function() { okno.ukryj(); });
	$(h3).html('Informacje o markerze');
	$(p_tresc).attr('class','tresc');
	$(div_stopka).attr('class','stopka');
	
	$(div_ikona).appendTo($(div_tresc));
	$(h3).appendTo($(div_tresc));
	$(img_zamknij).appendTo($(div_tresc));
	$(p_tresc).appendTo($(div_tresc));
	$(div_tresc).appendTo($(div_okno));
	$('
').css('clear','both').appendTo($(div_tresc)); $(div_stopka).appendTo($(div_okno)); $(div_okno).appendTo($(mapa.getPane(G_MAP_FLOAT_PANE))); this.latlng = mapa.getCenter(); this.mapa = mapa; this.okno = div_okno; };

Powyższy kod odpowiada za stworzenie odpowiednich elementów w strukturze DOM. Warto zwrócić uwagę na sposób tworzenia obiektów w liniach 3-9 (tak w jQuery tworzy się obiekty DOM), oraz na sposób ich modyfikacji przy użyciu selektorów. Sposób technicznej budowy okna jest dowolny, powyższy przykład możesz traktować jako szablon lub inspirację. Ważne są cztery ostatni linijki - div zawierający treść dołączamy do obiektu mapy (wskazówka - celowo użyłem do tego funkcji $() dostępnej w jQuery), następnie zapamiętujemy odwołania do środka mapy (potrzebne w celu poprawnej inicjalizacji), mapy oraz stworzonego przed chwilą kontenera. Pozostałe standardowe metody są dość proste do napisania:

Okno.prototype.remove = function()   
{   
	$(this.okno).remove();
};   
  
Okno.prototype.copy = function()   
{   
	return new Okno();
};   
  
Okno.prototype.redraw = function(wymus)   
{   
	if (!wymus)   
		return;  
	var punkt = mapa.fromLatLngToDivPixel(this.latlng);
	$(this.okno).css('top',(punkt.y-$('#okno').height())+'px').css('left',punkt.x+'px'); 
}   

Tak jak wcześniej, korzystam tu z uniwersalnej funkcji $(). Bardzo ważna jest przedostatnia linijka - współrzędne kontenera określamy jako współrzędna y klikniętego punktu minus wysokość kontenera w pionie, oraz współrzędne x klikniętego punktu w poziomie. Dzięki temu kontener będzie pokazywał się nad punktem, będąc względem niego w pozycji lewo-góra.

Na koniec kilka własnych metod, z których będziemy korzystać:

Okno.prototype.zmienZawartosc = function(html)
{
	$('#okno>.tresc>p.tresc').html(html);
}

Okno.prototype.zmienTytul = function(html)
{
	$('#okno>.tresc>h3').html(html);
}

Okno.prototype.pokaz = function()
{
	$('#okno').fadeIn(500);
}

Okno.prototype.ukryj = function()
{
	$('#okno').fadeOut(500);
}

Pierwsza z nich (zmienZawartosc() podmienia treść okienka informacyjnego na tą, określoną jedynym argumentem funkcji. Druga metoda robi to samo, tylko że dla nagłówka okna informacyjnego. Trzecia i czwarta metoda to odpowiednio pojawianie się i znikanie okna. Animacja zostanie wykonana przez jQuery, a czas jej trwania to rozsądne 500 milisekund (pół sekundy).

Otwieranie okna

Czas połączyć wszystkie wyżej wymienione metody, by okno się pojawiało w odpowiednim momencie i z odpowiednią modyfikacją. Będzie za to odpowiadała metoda otworzOkno() markera, a jej prototyp wygląda tak:

// prototyp funkcji otwierającej okno z informacjami
GMarker.prototype.otworzOkno = function(html,opcje_uzytkownika)
{
	var punkt = this.getPoint();
	var opcje = 
	{
		przyciskX:			true,
		tytul:				false,
		ikona:				true
	}; // domyślne opcje (mogą zostać nadpisane opcjami użytkownika)
	
	if(opcje_uzytkownika)
		$.extend(opcje,opcje_uzytkownika);
	
	var tytul = (opcje.tytul ? opcje.tytul : 'Informacje o markerze');
	var przyciskX = (opcje.przyciskX ? true : false);
	var ikona = (opcje.ikona ? true : false);
	var ikonaURL = this.getIcon().image;	

	$('#okno').fadeOut(500, function()
	{
		okno.latlng = punkt;
		okno.zmienZawartosc(html);
		
		if(tytul)
		{
			okno.zmienTytul(tytul);
			$('#okno h3').css('display','block');
		}
		else
		{
			$('#okno h3').css('display','none');
		}
		
		if(ikona)
			$('#okno .ikona').css('visibility','visible');
		else
			$('#okno .ikona').css('visibility','hidden');
		$('#okno .ikona').css('background-image','url('+ikonaURL+')');
			
		if(przyciskX)
			$('#okno .close').css('display','block');
		else
			$('#okno .close').css('display','none');
						
		okno.redraw(true);
		$('#okno').fadeIn(500);
	});	
}

Funkcja przyjmuje dwa argumenty - tekst do wyświetlenia oraz opcje (w notacji JSON, np: {opcja1: 'wartość 1', opcja2: 'wartość2'}). Pierwsze linijki zawierają standardowy zestaw opcji, który następnie rozszerzamy o te, przekazane w drugim argumencie. Dzięki temu domyślne wartości zostaną nadpisane wartościami użytkownika (gdy je podano) lub pozostaną standardowe, jeśli ich nie podano.

Potem następuje fragment, odpowiadający za uaktualnienie zawartości i animację menu. Zagnieżdżenie akcji jQuery może się wydać niejasne, w takim przypadku zalecam zapoznanie się z dowolnym tutorialem jQuery. Efektem wywołania metody otworzOkno() będzie uaktualnienie pozycji okna, podmienienie jego zawartości, pobranie ikonki klikniętego markera i uaktualnienie tej w okienku, a wszystko to w zależności od konfiguracji użytkownika.

Wygląd (CSS)

Aby całość wyświetlała się poprawnie, konieczna jest odrobina CSS:

#okno
{
	position: absolute;
	margin-left: -141px;
}

#okno .stopka
{
	display: block; width: 286px;
	background: url(http://gmapsapi.com/examples/075/dol.png) repeat-x 30px 0;
	padding: 0;
	margin: 0;
	height: 46px;
}

#okno div.tresc
{
	border: 1px solid rgb(181,181,181);
	border-bottom: 0;
	background: url(http://gmapsapi.com/examples/075/srodek.png) repeat-y white;
}

#okno h3
{
	display: block;
	margin: 0;
	padding: 4px;
	width: 220px;
	font-family: Arial;
	font-size: 14px;
	float: left;
	margin-left: 7px;
	border-bottom: 1px solid #ededed;
}

#okno p
{
	clear: right;
}

#okno .close
{
	border: 1px solid red;
	float: right;
	margin: 4px 4px 0 0;
	padding: 0;
	cursor: pointer;
}

#okno p
{
	display: block;
	margin: 0 0 5px 32px;
	font-family: Arial;
	padding: 4px;
	font-size: 11px;
	color: #333;
	text-align: justify;
}

#okno .ikona
{
	float: left;
	width: 20px;
	margin: 3px 0 0 5px;
	background-repeat: no-repeat;
	height: 32px;
}

Używanie okien

Aby wyświetlić okno, należy wywołać metodę otworzOkno() obiektu klasy GMarker, przykładowo:

marker.otworzOkno(opis,opcje);

gdzie opis to string (dozwolony HTML) z opisem, jaki ma być w oknie, a opcje to opcje w formacie JSON. W przykładzie zaimplementowano trzy elementy dające się personalizować - użytkownik może dla danego markera ustawić tytuł okna, wyłączyć przycisk X do zamykania, albo też wyłączyć wyświetlanie ikony w oknie. Przykładowo, taki kod:

marker.otworzOkno('Jestem markerem!', {tytul: 'To ja!', przyciskX: false, ikona: false});

Wyświetli okno z tytułem To ja!, treścią Jestem markerem!, bez przycisku X i bez ikony. Oczywiście, nie musimy podawać wszystkich opcji - w tym przypadku zostaną użyte opcje domyślne - te, które zostały zakodowane w metodzie Okno().

Praktyczne użycie

Przykład 1 jet bogatszy o dodatkowy kod, dzięki któremu na mapę dodane zostały 4 markery, każdy z inną ikoną i z innym zestawem opcji. Kliknij je by sprawdzić, jak działa animacja pokazywania/ukrywania okna, oraz jak wygląda okno w Twojej przeglądarce: 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


Wyświetlanie informacji na mapie

API v2

Kurs podstaw cz. V: Dodawanie tekstu i obrazków w dymkach informacyjnych


Kategorie markerów i polilinii

API v2

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


Wyszukiwanie markerów as-you-type

API v2

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