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.

Pamiętanie danych między sesjami

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Jeśli Twój użytkownik ma zwyczaj pracować w ściśle określonym obszarze na mapie, wygodne może być udostępnienie możliwości pamiętania jej parametrów pomiędzy poszczególnymi sesjami. W tym poradniku pokażę dwie podstawowe metody, które możesz wykorzystać w swojej aplikacji.

Metoda 1: Link stały

Pierwszym sposobem na zapamiętanie danych między sesją jest udostępnienie możliwości generowania tzw. linku stałego (ang. permalink) do aktualnie wyświetlanego widoku na mapie. Można go skopiować do schowka lub zapisać do zakładek - kiedy adres strony zostanie wywołany z tego specjalnie przygotowanego adresu, mapa ustawi się w sprecyzowanych parametrami adresu ustawieniach.

Przykładowy adres linku stałego może wyglądać następująco:
https://gmapsapi.com/przyklady/029/02.html?lat=53.41935400090768&lng=14.58160400390625&zoom=8&typmapy=mapa
Można odczytać z niego informację o położeniu mapy (punkt GLatLng(53.41935400090768,14.58160400390625)), poziom przybliżenia = 8, oraz typ mapy normalnej.

Generowanie linku stałego

Pod mapą dodamy link o tytule "pokaż link stały". Po jego kliknięciu wyświetli się małe okienko, w którym napisany będzie adres. W celu realizacji takiego interfejsu napiszemy właną klasę LinkStaly, odpowiedzialną za wyświetlenie okna i wygenerowanie linku. Globalny obiekt kontrolka tworzymy i dodajemy do mapy:

kontrolka = new LinkStaly();
kontrolka.dodajDoMapy(mapa);

Klasa LinkStaly:

function LinkStaly() {}
LinkStaly.prototype.dodajDoMapy = function(mapa)
{
	var kontener	= document.createElement("div");
	kontener.id = 'linkstaly'; // id diva z linkiem to linkstaly
	kontener.style.display = 'none'; // na początku kontrolka ma być ukryta
	kontener.appendChild(document.createTextNode('Link stały do tego widoku:'));
	
	var linkurl = document.createElement('textarea');
	linkurl.className = 'link';
	linkurl.id = 'url'; // id pola tekstowego to url
	kontener.appendChild(linkurl);
	
	var przycisk = document.createElement('input');
	przycisk.type = 'button';
	przycisk.value = 'OK';
	przycisk.onclick = function() { kontrolka.ukryj(); };
	kontener.appendChild(przycisk);
	
	this.mapa = mapa;
	this.wlaczony = false;
	mapa.getContainer().appendChild(kontener);
}

Dzięki metodzie dodajDoMapy utworzone okno (blokowy element div o id linkstaly) zostanie dołączone do mapy. Okienko zawierać będzie tekst "Link stały do tego widoku", pole typu textarea, do którego będzie wpisany adres URL, oraz przycisk OK, dzięki któremu okienko zostanie ukryte.

LinkStaly.prototype.ukryj = function()
{
	document.getElementById('linkstaly').style.display = 'none';
	this.wlaczony = false;
}

Własność wlaczony ma być ustawiana na false, gdy okienko nie jest widoczne, a gdy jest to wartość tej własności ma wynosić true. W tym przykładzie nie będzie ona wykorzystana, ale w następnym zrobimy z niej użytek. Mamy już kontrolkę dodaną do mapy, czas napisać kod, który wygeneruje link stały:

LinkStaly.prototype.wyswietl = function()
{
	// pobieramy odpowiednie parametry mapy
	var lat 	= this.mapa.getCenter().lat();
	var lng 	= this.mapa.getCenter().lng();
	var zoom 	= this.mapa.getZoom();
	switch(this.mapa.getCurrentMapType())
	{
		case G_HYBRID_MAP: 		var typ = 'hybryda'; break;
		case G_SATELLITE_MAP: 	var typ = 'satelita'; break;
		case G_PHYSICAL_MAP: 	var typ = 'teren'; break;
		default: 				var typ = 'mapa';
	}
	
	// to jest bazowy adres tego przykładu
	var adres 	 = 'https://gmapsapi.com/przyklady/029/01.html';
	
	// a to dodatkowe parametry mapy
	adres 		+= '?lat='+lat;
	adres 		+= '&lng='+lng;
	adres 		+= '&zoom='+zoom;
	adres 		+= '&typmapy='+typ;
	
	// wyświetlamy link i pokazujemy okno
	document.getElementById('url').value = adres;
	document.getElementById('linkstaly').style.display = 'block';
	this.wlaczony = true;
}

Kod w powyższym listingu jest skomentowany, więc dalsze uwagi nie są już potrzebne. Aby wygenerować link stały, skorzystamy z funkcji:

function pobierzLinkStaly()
{
	if(!kontrolka)
		return;
	kontrolka.wyswietl();
}

Ponieważ link pod mapą będzie wyświetlany zanim mapa się załaduje, sprawdzamy najpierw czy stworzona została już kontrolka, i jeśli tak to wyświetlamy adres stały.

Wczytywanie danych z linku stałego

OK, link został wygenerowany. Jak jednak odczytać dane, zapisane jako parametry w adresie? Można to zrobić albo po stronie serwera (PHP), albo po stronie klienta. Ja zaprezentuję to drugie rozwiązanie (jako trudniejsze)

function pobierzParametrZAdresu(nazwa)
{
	nazwa = nazwa.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+nazwa+"=([^&#]*)";
	var regex = new RegExp(regexS);
	var wyniki = regex.exec(window.location.href);
	if(wyniki == null)
		return false;
	else
		return wyniki[1];
}

Ta funkcja dzięki wyrażenion regularnym szuka w parametrach w adresie nazwy poszukiwanej przez nas (jej nazwa jest przekazana w argumencie funkcji), i zwraca odpowiadającą jej wartość, lub false jeśli takiego parametru nie znaleziono. Dzięki tej funkcji możliwe staje się pobranie wartości, które można obsłużyć następująco:

// odczytujemy parametry z adresu
var lat 	= pobierzParametrZAdresu('lat') || 53.41935400090768;
var lng 	= pobierzParametrZAdresu('lng') || 14.58160400390625;
var zoom	= pobierzParametrZAdresu('zoom') || 8;

zoom 	= parseInt(zoom);
lat 	= parseFloat(lat);
lng 	= parseFloat(lng);

switch(pobierzParametrZAdresu('typmapy'))
{
	case 'satelita': 	var typ = G_SATELLITE_MAP; break;
	case 'typ': 		var typ = G_PHYSICAL_MAP; break;
	case 'hybryda': 	var typ = G_HYBRID_MAP; break;
	default: 			var typ = G_NORMAL_MAP; break;
}

Wycentrowanie mapy jest już w tym momencie czystą formalnością. Pamiętaj, by zapewnić alternatywne dane w sytuacji, gdy w adresie parametrów nie podano (w kodzie powyżej są to liczby po dwóch pionowych kreskach ||).

Jak to działa? Sprawdż przykład: