Poznaj Google Maps API

Doczytywanie opisów markerów

« powrót do listy kategorii

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: przykład 1pokaż kod przykładu

Przykład działania (XML)

Zapisanie danych w pliku XML jest zazwyczaj lepszym rozwiązaniem niż trzymanie ich w skrypcie. Jeśli jednak łączna objętość wszystkich tekstów, które muszą być zawarte w pliku XML jest duża, można również zaimplementować rozwiązanie jak w powyższym przykładzie, a w pliku XML pozostawić jedynie odnośnik do pliku z opisem. Przykładowy plik XML:

<dane>
	<marker lat="53.41" lon="14.58" url="/examples/012/01/titanic.html" />
</dane>

Wczytamy ten plik za pomocą prostej funkcji, parsującej XML:

function wczytajMarkery(url)
{
	GLog.write('Wczytuję '+url); // w celach diagnostycznych
	GDownloadUrl(url,function(dane,kodOdpowiedzi)
	{
		var xml = GXml.parse(dane);  
		var markery = xml.documentElement.getElementsByTagName('marker');  
		for(var i=0; i<markery.length; i++)  
		{  
		    var lat = parseFloat(markery[i].getAttribute("lat"));  
		    var lon = parseFloat(markery[i].getAttribute("lon"));  
		    var url = markery[i].getAttribute("url");  
			
		    dodajMarker(new GLatLng(lat,lon),url,{});  
		}  
	});
}

Funkcję wczytajMarkery() wywołamy tuż za inicjalizacją mapy:

wczytajMarkery('/examples/006/02/markery.xml');

I gotowe! Oczywiście, efekt działania będzie identyczny jak w przykładzie 1, ale efektywność rozwiązania znacząco wzrasta, szczególnie jeśli na Twojej mapie jest wiele markerów o długich, rozbudowanych opisach: przykład 2pokaż kod przykładu

Uwagi

• Jak zwykle, pamiętaj o ograniczeniach, wynikających z zabezpieczeń przed atakami typu XSS. Pobierany plik z opisem musi być w tej samej domenie co skrypt go wywołujący.
• Jeżeli możesz, używaj metody opisanej w tym przykładzie: Optymalizacja wyświetlania dużej ilości znaczników. Dzięki niej, marker może posiadać dwa rodzaje opisów - skrócony i rozszerzony, przy czym ten drugi jest pobierany dynamicznie na żądanie użytkownika.