Google Maps API - zostań wielkim bratem (2)

W drugiej części artykułu o Google Maps API odsłonimy kulisy nanoszenia kolorowych warstw na mapę, animowania przejść pomiędzy różnymi adresami oraz wyznaczania trasy przejazdu samochodem pomiędzy zadanymi punktami. Co więcej, zaprezentujemy także metodę wstawiania reklam Google AdSense na mapę, a nawet przepis na tworzenie całkowicie własnych mapek, wykorzystujących Google Maps. A więc zaczynamy!

Zmiana nazw typów widoków

W poprzednim artykule zaprezentowaliśmy kontrolki, które możesz dołączyć do swojej mapy. Była wśród nich również kontrolka odpowiedzialna za wybór widoku mapy przez użytkownika. Przypomnijmy, że możesz udostępnić taką kontrolkę w następujący sposób:

map.addControl(new GMapTypeControl());

Prezentowane typy mapy mają jednak anglojęzyczne nazwy. Co zrobić, aby spolonizować kontrolkę?

 1. var types = map.getMapTypes();
 2. types[0].getName = function() {
 3.   return "Satelita";
 4. }
 5. types[1].getName = function() {
 6.   return "Hybryda";
 7. }
 8. types[2].getName = function() {
 9.   return "Mapa";
10. }

Listing zwinięty - 10 linii

Za pomocą metody getMapTypes() klasy GMap2 zwracane są aktualnie dostępne widoki w formie tablicy. Jeśli chcesz zmienić ich nazwę, wystarczy podmienić dla każdego elementu tej tablicy funkcję getName() na własną.

Animowanie przejścia między punktami

Silnik Google Maps pozwala na płynne animowanie przejść pomiędzy różnymi punktami. Służy do tego metoda panTo() klasy GMap2.

map.panTo(point);

Przesuwa ona "kamerę" do wskazanego punktu. Jeśli punkt ten znajduje się w wyświetlanej części mapy lub niedaleko jej obrzeży, nastąpi płynne przejście. Jeśli wyszukiwany punkt znajduje się dalej, wówczas nastąpi gwałtowny przeskok.

Oto, w jaki sposób możesz wykorzystać metodę panTo w celu utworzenia animowanych i ładnych przejść po mapie. Na początek przygotujemy kilka przydatnych funkcji pomocniczych, które będą na potrzeby tego przykładu realizować zadanie przybliżania, oddalania oraz przesuwania widoku kamery do określonego punktu (animacja). Aby oczekiwane operacje wykonywane były sekwencyjnie, wykorzystamy funkcję setTimeout() do ustalenia precyzyjnego czasu wywołania każdej z nich. Każda operacja przesuwa moment wyzwolenia kolejnej.

 1. function zoomIn(text) {
 2.   // Zapamietaj czas wykonania
 3.   var time = tim;
 4.   // Zwieksz czas - nastepna operacja wykona sie 3 sekundy pozniej
 5.   tim += 3000;
 6.   // Utworz funkcje, ktora zostanie wyzwolona po czasie time
 7.   window.setTimeout(function() {
 8.     // Zmien zoom - przyblizenie
 9.     map.setZoom(16);
10.     map.openInfoWindowHtml(map.getCenter(), text);
11.   }, time);}
12. // Funkcja oddalajaca - analogicznie do powyzszej
13. function zoomOut() {
14.   var time = tim;
15.   tim += 1000;
16.   window.setTimeout(function() {
17.     map.closeInfoWindow();
18.     map.setZoom(8);
19.   }, time);
20. }
21. // Przejscie pomiedzy punktami
22. function animateTo(address, shortwait) {
23.   var time = tim;
24.   if (shortwait == 1)
25.     tim += 500;
26.   else
27.     tim += 3000;
28.   // Geolokalizacja jest znana z poprzednich skryptow
29.   geocoder.getLatLng(address, function(point) {
30.     window.setTimeout(function() {
31.       map.panTo(point);
32.     },time);
33.   });
34. }

Listing zwinięty - 34 linii

W powyższych przykładach zastosowane zostały najprostsze metody sterowania animacją. Ponieważ jednak szybkość przesuwania mapy oraz zoomów może zależeć od szybkości komputera oraz łącza internetowego, ustawiane na stałe czasy nie są najlepszym pomysłem.

Lepiej byłoby więc zaimplementować mechanizmy sprawdzające, czy określona operacja została wykonana i dopiero wówczas zrealizować kolejną. Pozostawiamy to jednak do samodzielnego dopracowania.

Gdy mamy już utworzone wszystkie funkcje pomocnicze, czas na zainicjowanie animacji:

 1. var geodecoder = null;
 2. var map = null;
 3. var tim = 1000;
 4. function load() {
 5.   if (GBrowserIsCompatible()) {
 6.     map = new GMap2(document.getElementById("map"));
 7.     geocoder = new GClientGeocoder();
 8.     ...
 9.     showAddress("Nawojki 11, Krakow, PL", 8);
10.     zoomIn("Uniwersytet Jagiellonski<br />Wydzial Matematyki i Informatyki");
11.     animateTo("Mickiewicza 30, Krakow, PL");
12.     zoomIn("Akademia Gorniczo-Hutnicza<br />Wydzial Fizyki i Informatyki
    Stosowanej");
13.     zoomOut();
14.     animateTo("Bankowa 14, Katowice, PL");
15.     zoomIn("Uniwersytet Slaski<br />Wydzial Matematyki, Fizyki i Chemii");
16.     zoomOut();
17.     animateTo("Akademicka 16, Gliwice, PL");
18.     zoomIn("Politechnika Slaska<br />Wydzial Automatyki, Elektroniki i
    Informatyki");
19.     zoomOut();
20.     animateTo("Uniwersytet Wroclawski, PL");
21.     zoomIn("Uniwersytet Wroclawski<br />Wydzial Matematyki i Informatyki");
22.     zoomOut();
23.     ...
24.   }
25. }

Listing zwinięty - 25 linii

Powyższy kod prezentuje na mapie wybrane uczelnie kształcące informatyków na południu Polski. Pomiędzy poszczególnymi miastami i uczelniami następuje płynne przejście. W każdym mieście realizowane jest przybliżenie do widoku uczelni, a następnie powrót do mapy w mniejszej skali.

Aby możliwe były animacje przejść na większych obszarach, konieczne będzie spore oddalenie oraz odpowiednio duża mapa (aby poszczególne miejscowości znajdowały się w widocznej jej części lub na obrzeżach). Dlatego pamiętaj, aby powiększyć warstwę z mapą. Rozmiar 1000 x 500 pikseli powinien wystarczyć:

<div id="map" style="width: 1000px; height: 500px"></div>

Animowane przejścia można wykorzystać do tworzenia ciekawych prezentacji. Na niektórych przeglądarkach Google Maps umożliwia również płynne skalowanie zoomu. Niestety częściej zauważalny jest mniej ciekawy efekt "skoku" zoomu.