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.

Doczytywanie opisów markerów

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Proste aplikacje często łączą warstwę danych z warstwą skryptową. Przykładowo, bezpośrednio w skrypcie możesz przechowywać tekst, który otwierany jest w oknach infoWindow. Ta metoda ma jednak kilka wad, które mogą stać się uciążliwe, jeśli na mapę trzeba wstawić predefiniowane markery, a nie korzystamy z dobrodziejstw XML:

  • im więcej tekstu w skrypcie, tym większy jego rozmiar - a co za tym idzie - dłuższy czas wczytywania
  • użytkownik zazwyczaj nie będzie otwierał okien wszystkich dostępnych markerów, co oznacza, że nie istnieje potrzeba przechowywania ich zawartości

W tej części kursu napiszemy aplikację, która po kliknięciu na marker wczytuje z zewnętrznego pliku odpowiednie dane na żądanie - oszczędza to czas przy ładowaniu oraz transfer.

Zasada działania

Każdemu dodawanemu markerowi przypiszemy pewną właściwość url, w której będzie przechowywany adres pliku, zawierającego tekst okna infoWindow. Następnie, za pomocą prototypowanej metody openAjaxInfoWindow() plik ten będzie pobierany, a jego zawartość wyświetlana w okienku:

GMarker.prototype.openAjaxInfoWindow = function(url,opcje)
{
	var marker = this;
	GLog.write('Pobieram plik '+url); // w celach diagnostycznych następuje wyświetlenie komunikatu o pobieranym pliku
	GDownloadUrl(url,function(tresc,kodOdpowiedzi)
	{
		kontener.innerHTML = '<div style="width: 300px; height: 200px; overflow: auto;">'+tresc+'</div>';
		marker.openInfoWindow(kontener,opcje);
	});
}

Obiekt kontener tworzymy na początku działania skryptu jako obiekt globalny:

var kontener = document.createElement('div');

Funkcja, służąca do dodania markera na mapę może wyglądać następująco:

function dodajMarker(punkt,url,opcje)
{
	var marker = new GMarker(punkt);
	marker.url = url;
	mapa.addOverlay(marker);
	GEvent.addListener(marker,'click',function()
	{
		marker.openAjaxInfoWindow(marker.url);
	});
	return marker;
}

Przykład działania (bez XML)

Dodamy marker, przekazując funkcji dodajMarker() następujące parametry:

var marker = dodajMarker(new GLatLng(53.41,14.58),'/examples/012/01/titanic.html',{});
mapa.addOverlay(marker);

Sprawdzamy działanie w praktyce - działa prawidłowo, a dodatkowo czas między kliknięciem a wyświetleniem treści jest praktycznie niezauważalny: