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.

Efektowna prezentacja zdjęć na mapie

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Korzystając z syntezy API Google oraz innych bibliotek JS można uzyskać bardzo ciekawe efekty. W tym poradniku stworzymy prezentację geotagowanych zdjęć, w której zaserwujemy użytkownikowi bardzo efektowny sposób ich prezentacji. Zdjęcia będą wyświetlane bezpośrednio na mapie w zdefiniowanym przez nas punkcie, każda z miniaturek będzie miała rozmiar 60px. Po kliknięciu na miniaturkę, zostanie ona płynnie powiększona do dużego zdjęcia. Do dzieła!

Highslide JS

Do wykonania aplikacji użyjemy darmowej do użytku niekomercyjnego biblioteki Highslide JS (dostępna jest także w wersji komercyjnej). Szczegóły i informacje na jej temat zawarto na stronie autora: http://highslide.com/.

Najlepiej pobrać pełną wersję skryptu, wraz z przykładami i grafiką. Na potrzeby tego przykładu skorzystałem z samego skryptu (http://gmapsapi.com/examples/060/01/highslide.js) oraz z grafik (http://gmapsapi.com/examples/060/01/highslide/ - wszystkie do pobrania z tego linku).

W kodzie należy dołączyć plik skryptu: (zalecam umieszczenie kopii skryptu na swojej stronie i linkowanie do niej)

<script type="text/javascript" src="/examples/060/highslide.js"></script> 

Nim zaczniemy korzystać z dobrodziejstw oferowanych przez skrypt, musimy go jeszcze odpowiednio skonfigurować. Skrypt konfiguruje się z poziomu Java Script, a jego wygląd określają reguły CSS. Tuż za fragmentem, w którym dołączyliśmy skrypt Highslide definiujemy jego własności:

hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.headingEval = 'this.a.title';
hs.graphicsDir = '/examples/060/highslide/';
hs.dimmingOpacity = 0.75;
hs.lang.loadingText = 'wczytywanie';
hs.lang.restoreTitle = 'Zamknij';

Szczególnie ważna jest trzecia linijka (nakazująca wyświetlanie podpisu pod zdjęciem pobranego z atrybutu title linku), czwarta (w której definiujemy ścieżkę do elementów graficznych Highslide). Pozostałe linie odpowiadają za rzeczy kosmetyczne - pierwsza linijka to wybór rodzaju narożników, druga włącza płynne zaciemnianie obrazu, piąta linijka określa stopień zaciemnienia, a dwie ostatnie za spolszczenie tekstów.

Uwaga! Upewnij się, że ścieżka do obrazków jest poprawna, oraz że obrazki zostały do niej faktycznie wysłane. Inaczej Highslide się nie uruchomi!

Teraz, by całość wyglądała lepiej, zdefiniujemy wygląd za pomocą CSS:

.highslide-wrapper div {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
}
.highslide {
	cursor: url(highslide/graphics/zoomin.cur), pointer;
	outline: none;
	text-decoration: none;
}
.highslide img {
	border: 2px solid silver;
}
.highslide:hover img {
	border-color: gray;
}

.highslide-active-anchor img, .highslide-active-anchor:hover img {
		border-color: black;
}
.highslide-image {
		border-width: 2px;
		border-style: solid;
		border-color: white;
		background: gray;
}
.highslide-wrapper, .rounded-white {
		background: white;
}
.highslide-image-blur {
}
.highslide-caption {
		display: none;
		border-top: none;
		font-size: 1em;
		padding: 5px;
		background: white;
}
.highslide-heading {
		display: none;
		font-weight: bold;
		margin-bottom: 0.4em;
}
.highslide-dimming {
		position: absolute;
		background: black;
}
.highslide-loading {
		display: block;
		color: black;
		font-size: 9px;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		padding: 3px;
		border: 1px solid white;
		background-color: white;
		padding-left: 22px;
		background-image: url(highslide/graphics/loader.white.gif);
		background-repeat: no-repeat;
		background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
		padding: 2px;
		color: silver;
		text-decoration: none;
		font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
		color: white;
		background-color: gray;
}

Czas zająć się naszymi zdjęciami!

Dane

Przygotowałem na potrzeby tego poradnika kilkanaście zdjęć miast w Polsce. Zdjęcia dostępne są pod tym adresem: http://gmapsapi.com/examples/060/zdjecia_600/. Każde z nich zostało zmniejszone do 600px, tak by szybko się ładowały przy równocześnie możliwie dobrej jakości. Przygotowałem także odpowiednio zmniejszone miniaturki o szerokości 60px do wyświetlania na mapę (są tutaj: http://gmapsapi.com/examples/060/zdjecia_60/).

Stworzyłem także tabelę w bazie danych, która zawiera informację o każdym ze zdjęć. W szczególności istotne dla nas będą:

  • Nazwa miejsca
  • Nazwa pliku ze zdjęciem
  • Współrzędne geograficzne

a także wymiary zdjęcia. Wymiary zdjęcia wykorzystamy do wyświetlenia na mapie miniatur o odpowiednich proporcjach:

Dane

Przykładowe dane w formacie CSV możesz ściągnąć z tego adresu: http://gmapsapi.com/examples/060/dane.csv

Tak przygotowane dane za pomocą odpowiedniego skryptu PHP przekształcimy do formatu JSON, który wczytamy w mapie Google.

Generowanie pliku JSON

Szczegóły na temat wykorzystania tego formatu zostały omówione w kursie Wczytywanie danych z pliku JSON. Kod PHP, tworzący JSONa wygląda tak:

header('Content-Type: text/javascript; charset=utf-8');

$user="nazwa_użytkownika";
$pass="haslo_użytkownika";
$baza="baza_danych";

include('jsonencoder.php');
$json = new Services_JSON();

mysql_connect ("localhost", $user, $pass) or 
	die ("Nie nawiązano połączenie z bazą MySQL");
mysql_select_db ($baza) or 
	die ("Nie nawiązano połączenia z bazą serwisu.");
	
mysql_query("SET NAMES 'UTF8';");

$zapytanie = "SELECT id,nazwa,lat,lng,szerokosc,wysokosc,url FROM PoznajGoogleMaps_zdjecia";
$pobierz = mysql_query($zapytanie);

$tablica = array();

while($dane = mysql_fetch_array($pobierz))
{
	$miasto = array('id'=>$dane['id'], 'nazwa'=>$dane['nazwa'], 'lat'=>(float) $dane['lat'], 'lng'=>(float) $dane['lng'], 'szerokosc'=>(int) $dane['szerokosc'], 'wysokosc'=>(int) $dane['wysokosc'], 'url' => $dane['url']);
	array_push($tablica,$miasto);
}

print $json->encode($tablica);

Taki skrypt zapisujemy pod nazwą np. wczytaj.php. Rezultat jego działania można sprawdzić, klikając na ten link: http://gmapsapi.com/examples/060/wczytaj.php. Pozostał ostatni etap - wczytanie tego pliku i wyświetlenie zdjęć na mapie.

Po stronie klienta...

Aby wyświetlić zdjęcie na mapie, stworzymy nową klasę dziedziczącą po GOverlay(). Zaoszczędzi to pracy nad dodatkowymi funkcjami do kontroli zdjęcia. Więcej na ten temat w kursie Tworzenie własnych obiektów GOverlay.

Za pojedyncze zdjęcie odpowiadać będzie jeden obiekt klasy Miasto(). Jej konstruktor przyjmuje wszystkie parametry, jakie są nam potrzebne do tworzenia i wyświetlania miniaturki, tj. kolejno nazwę, szerokość i długość geograficzną, nazwę pliku ze zdjęciem, i jego szerokość oraz wysokość.

function Miasto(nazwa,lat,lng,url,szer,wys)
{
	this.nazwa	= nazwa;
	this.lat	= lat;
	this.lng	= lng;
	this.url	= url;
	this.szer	= szer;
	this.wys	= wys;
	this.punkt	= new GLatLng(this.lat,this.lng);
}
Miasto.prototype = new GOverlay();

Poniżej implementacja trzech niezbędnych metod do usuwania, kopiowania i odświeżania pozycji zdjęcia:

Miasto.prototype.remove = function()
{
	this.obrazek.parentNode.removeChild(this.obrazek);
};

Miasto.prototype.copy = function()
{
	return new Miasto(this.nazwa, this.lat, this.lng, this.url, this.szer, this.wys);
};

Miasto.prototype.redraw = function(wymus)
{
	if (!wymus)
		return;
	this.obrazek.style.top = (mapa.fromLatLngToDivPixel(this.punkt).y-(30*this.wys/this.szer))+'px';
	this.obrazek.style.left = (mapa.fromLatLngToDivPixel(this.punkt).x-30)+'px';
}

Wreszcie, czas na najważniejszą metodę, odpowiedzialną za stworzenie miniatury i na dodanie jej do mapy:

Miasto.prototype.initialize = function(mapa)
{
	var link 		= document.createElement("a");
	link.title		= this.nazwa;
	link.id			= this.url;
	link.href		= 'http://gmapsapi.com/examples/060/zdjecia_600/'+this.url;
	link.onclick	= function() { return hs.expand(this); };
	
	var obraz	= document.createElement("img");
	obraz.src	= 'http://gmapsapi.com/examples/060/zdjecia_60/'+this.url;
	obraz.style.display	=' block';
	obraz.style.width	= '60px';
	obraz.style.height	= (60*this.wysokosc/this.szerokosc)+'px';
	obraz.style.border	= '1px solid black';
				
	link.appendChild(obraz);
	link.style.display 	= 'block';
	link.style.padding	= '0px';
	link.style.margin	= '0px';
	link.style.position	= 'absolute';
	link.class			= 'highslide';

	mapa.getPane(G_MAP_MAP_PANE).appendChild(link);
	this.obrazek	= link;
	return this.obrazek;
};

Najpierw tworzone jest hiperłącze, któremu ustawiamy odpowiednie parametry (tytuł zdjęcia będzie jego opisem, pobieramy go z własności nazwa). Link do zdjęcia dużego (linia 6) tworzony jest ze znanego prefiksu, połączonego z nazwą obrazka z własności url. Po kliknięciu na zdjęcie (linia 7) należy wykonać funkcję hs.expand(this). Dzięki temu, zdjęcie płynnie wynurzy się z mapy i użytkownik zobaczy je w pełnym rozmiarze.

W dalszej części tworzymy samą miniaturkę, ustawiamy jej odpowiednio styl i adres URL obrazka. Zwróć uwagę na sposób obliczania wysokości i szerokości miniaturki - ma ona stałą szerokość 60px, a wysokość definiowana jest na podstawie znanej proporcji dużego zdjęcia. Na końcu dodajemy miniaturkę do linku, link do obiektu mapy i zwracamy odwołanie do obrazka, które będzie potrzebne by API mogło manipulować jego pozycją.

Pozostało ostatnie ogniwo, spajające skrypty po stronie klienta i po stronie serwera. Należy wczytać wygenerowany plik JSON, i na podstawie jego zawartości stworzyć odpowiednie obiekty klasy Miasto():

function wstawMiasta(dane)
{
	for(var i=0; i<dane.length; i++)
	{
		var miasto = new Miasto(dane[i].nazwa, dane[i].lat, dane[i].lng, dane[i].url, dane[i].szerokosc, dane[i].wysokosc);
		mapa.addOverlay(miasto);
	}
}	

GDownloadUrl('/examples/060/wczytaj.php', function(dane, kodOdpowiedzi)
	{
		var json = eval('('+dane+')');
		wstawMiasta(json);
	});

Funkcję GDownloadUrl() musimy wywołać dopiero, gdy mapa jest już zainicjowana, czyli np. po jej wycentrowaniu.

Pełny kod oraz przykład działania dostępne poniżej: 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 znaczników na mapę

API v2

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Popularne, darmowe ikony dla markerów

API v2

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej


Kategorie markerów i polilinii

API v2

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