Poznaj Google Maps API

Wstawianie zdjęć z Picasa Web Albums

« powrót do listy kategorii

W poradniku Tworzenie własnych obiektów GOverlay został opisany sposób na dodanie własnych obiektów do mapy. Jeden z przykładów pokazywał, w jaki sposób można dodać miniaturkę zdjęcia. Było to dość pracochłonne, w celu wyświetlenia większej ilości zdjęć konieczne było pisanie wielu linii kodu. Jeśli posiadasz konto w Picasa Web Albums, a Twoje zdjęcia posiadają informację w EXIF o pozycji geograficznej (lub ich pozycja została ustalona ręcznie) to za pomocą jednej linii kodu możesz w łatwy sposób wyświetlić je na mapie.

W tym przykładzie wykorzystałem galerię zdjęć Picasa Team w serwisie Picasa Web Albums. Wszystkie operacje, które wykonałem da się również powtórzyć dla dowolnego innego konta w Picasa Web Albums.

1. Wejdź na stronę albumu, z którego zdjęcia chcesz wyświetlić na mapie. Po prawej stronie ekranu powininien znajdować się przycisk "Wyświetl w Google Earth" (zobacz obrazek poniżej)
   
2. Skopiuj adres linka do schowka (powinen wyglądać mniej więcej tak: http://picasaweb.google.com/data/feed/base/user/picasateam/albumid/5114654179889917777?alt=kml&kind=photo&hl=pl)
3. Upewnij się, że język aplikacji jest zgodny z parametetrem hl ze skopiowanego linka. Przykładowo, w powyższym adresie URL wartość parametru hl to pl, ale jeśli Twoja mapa posiada interfejs w języku np. hiszpańskim, powienieneś zmienić tę wartość na es.

Tak skopiowany link użyjemy jako adres URL pliku, przekazywany jako jedyny argument w konstruktorze obiektu GGeoXml. Obiekty GGeoXml dodaje się na mapę za pomocą metody addOverlay() mapy GMap2 - wówczas API samo pobierze, sparsuje i wyświetli żądaną treść. Dla wybranego przeze mnie albumu fragment kodu aplikacji wyglądać będzie następująco:

var zdjecia = new GGeoXml("http://picasaweb.google.com/data/feed/base/user/picasateam/albumid/5114654179889917777?alt=kml&kind=photo&hl=pl");
mapa.addOverlay(zdjecia);

Za pomocą dwóch linijek kodu można osiągnąć to, co w przypadku ręcznego kodowania zajęło by wiele linii. Oczywiście, możliwości konfiguracji i wyglądu nie są zbyt duże, ale dla większości początkujących użytkowników efekt powinien być zadowalający: przykład 1pokaż kod przykładu