Poznaj Google Maps API

Wbudowane kontrolki i sterowanie

« powrót do listy kategorii

Tworzone dotąd mapy nie umożliwiały zbyt dużej interakcji - można je było co najwyżej przesuwać. W tej części kursu dowiesz się, jak udostępnić oglądającemu możliwość wpływania na tryb wyświetlania mapy.

Kontrolka nawigacji podstawowej

Pierwszą z dostępnych kontrolek są przyciski podstawowej nawigacji. Dzięki nim można zmienić oglądany obszar lub też poziom przybliżenia. Kontrolka jest dostępna w trzech wersjach:

Dodanie jednej z kontrolek jest proste, i polega na dopisaniu funkcji mapa.addControl(), której parametrem jest nowa instancja funkcji, odpowiedzialnej za daną kontrolkę. W poniższym fragmencie kodu dodanie przycisków nawigacyjnych jest realizowane dzięki linijce 5:

if(GBrowserIsCompatible())  
{
	var mapa = new GMap2(document.getElementById('mapka'));
	mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),7);   
	mapa.addControl(new GLargeMapControl());
} 

Analogicznie dodaje się pozostałe tryby (pamiętaj, że naraz dodana może być tylko jedna kontrolka z tej grupy!)

Działanie powyższego kodu możesz sprawdzić w przykładzie 1: przykład 1pokaż kod przykładu

Kontrolka zmiany trybu mapy

API Google Maps udostępnia cztery podstawowe tryby wyświetlania:

• tryb normalny (stała G_NORMAL_MAP)
• tryb satelitarny - zdjęcia satelitarne (stała G_SATELLITE_MAP)
• tryb hybrydowy - zdjęcia satelitarne z nakładką z nazwami ulic (stała G_HYBRID_MAP)
• tryb terenowy (stała G_PHYSICAL_MAP)

Poniższe obrazki pokazują podgląd każdego z nich:

G_NORMAL_MAP	G_SATELLITE_MAP
G_HYBRID_MAP	G_PHYSICAL_MAP

Udostępnienie kontroli nad trybem mapy sprowadza się do dodania jednej linijki do kodu, oraz zadeklarowaniu, które tryby mają być dostępne. Oto fragment kodu, który spowoduje wyświetlenie mapy dostępnej w trzech trybach, z domyślnie wybranym trybem satelitarnym, oraz umożliwi internaucie zmianę trybu:

if(GBrowserIsCompatible())  
{
	var mapa = new GMap2(document.getElementById('mapka'));
	mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),7);   
	mapa.addControl(new GMapTypeControl());
}

Zobacz pełny kod i sprawdź jego działanie w przykładzie 2
przykład 2pokaż kod przykładu

Uwaga

• Jeśli chcesz udostępnić jedynie wybrane tryby, zastosuj przy tworzeniu obiektu mapy konstrukcję var mapa = new GMap2(document.getElementById('mapka'),{mapTypes: G_NORMAL_MAP, G_SATELLITTE_MAP,G_HYBRID_MAP});, pozostawiając jedynie te tryby, które chcesz udostępnić.
• Zwróć uwagę, że domyślnie na pasku typów mapy nie jest pokazywana mapa terenowa. Należy ją dodać ręcznie, dodając następujący kod: mapa.addMapType(G_PHYSICAL_MAP). Przykład 3 pokazuje jej działanie:

przykład 3pokaż kod przykładu

Kontrolka minimapy

Od wersji 2.0, API udostępnia możliwość dodania małego okienka w prawym dolnym rogu (domyślnie), pokazującego ogólny widok obszaru, na którym jesteśmy. Co więcej, za pomocą myszy można sterować widokiem mapy, przesuwając kwadracik podglądu w interesujące nas miejsce. Dodanie okienka sprowadza się do dopisania jednej linijki kodu:

mapa.addControl(new GOverviewMapControl());

Zobacz przykład 4, demonstrujący działanie minimapy: przykład 4pokaż kod przykładu

Kontrolka podziałki skali

Do mapy możesz również dodać podziałkę skali. Aby to zrobić, należy dopisać poniższy kod:

mapa.addControl(new GScaleControl());

Sprawdź działanie skryptu w przykładzie 5: przykład 5pokaż kod przykładu

Wszystko razem

Nic nie stoi na przeszkodzie, aby dodać do mapy kilka kontrolek. Przykład 6 pokazuje efekt takiego działania:

if(GBrowserIsCompatible())  
{
	var mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP]});
	mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);   
	
	// dodanie podstawowych przycisków
	mapa.addControl(new GLargeMapControl());
	
	// dodanie wyboru trybu mapy
	var typyMapy = mapa.getMapTypes();    
	typyMapy[0].getName= function() { return "Mapa";}
	typyMapy[1].getName = function() { return "Satelita";}
	mapa.addControl(new GMapTypeControl());
	
	// dodanie minimapy
	mapa.addControl(new GOverviewMapControl()); 
	
	// dodanie skali
	mapa.addControl(new GScaleControl());
}

Działanie skryptu pokazuje przykład 6: przykład 6pokaż kod przykładu

Ulepszenie sterowania myszą

Klasa GMap2 posiada kilka metod, które włączają/wyłączają ciekawe efekty sterowania myszą. Każdy z nich wymaga dodania jednej linijki za kodem inicjującym mapę.

Zoom przy podwójnym kliknięciu

Domyślnie, klikając dwa razy lewym przyciskiem myszy, mapa zostanie wycentrowana w klikniętym punkcie. Aby zamiast centrowania wymusić przybliżenie przy podwójnym kliknięciu, dodaj kod mapa.enableDoubleClickZoom() za deklaracją mapy, np.

var mapa = new GMap2(document.getElementById('mapka'));
mapa.enableDoubleClickZoom();

Efekt działania oraz pełny kod dostępny jako przykład 7: przykład 7pokaż kod przykładu

Płynny zoom przy podwójnym kliknięciu

Efektem działania przykładu 7 był natychmiastowy skok do wycentrowanego punktu. Aby wprowadzić efekt płynnego powiększenia (tylko Internet Explorer i Firefox) dodaj jeszcze kod mapa.enableContinuousZoom() za deklaracją mapy, np.

var mapa = new GMap2(document.getElementById('mapka'));
mapa.enableDoubleClickZoom(); // nie zapomnij o tej linijce
mapa.enableContinuousZoom();

Efekt działania oraz pełny kod dostępny jako przykład 8: przykład 8pokaż kod przykładu

Przybliżania / oddalanie za pomocą kółka myszy

API umożliwia wykorzystanie kółka myszy do zmiany poziomu przybliżenia. Aby włączyć tę funkcjonalność, niezbędny jest fragment kodu mapa.enableScrollWheelZoom() za deklaracją mapy, np.

var mapa = new GMap2(document.getElementById('mapka'));
mapa.enableScrollWheelZoom();

Efekt działania oraz pełny kod dostępny jako przykład 9: przykład 9pokaż kod przykładu

Wszystko razem

Oczywiście, nic nie stoi na przeszkodzie by wielu opcji naraz.

Wyłączanie i sprawdzanie funkcjonalności

Jeśli z jakiś powodów chcesz wyłączyć opisane powyżej funkcje, użyj analogicznie jednej z poniższych:

• mapa.disableDoubleClickZoom()
• mapa.disableContinuousZoom()
• mapa.disableScrollWheelZoom()

Aby sprawdzić, czy dana funkcjonalność jest włączona, użyj jednej z poniższych funkcji (zwraca true jeśli włączona, i false jeśli wyłączona

• mapa.doubleClickZoomEnabled()
• mapa.continuousZoomEnabled()
• mapa.scrollWheelZoomEnabled()

Przykład, pokazujący jak zaimplementować dynamiczne włączanie i wyłączanie danej opcji dostępny poniżej: przykład 10pokaż kod przykładu

Własne kontrolki

Bardziej zaawansowani użytkownicy mogą definiować i dodawać własne kontrolki. Szczegóły wyjaśnione są w tym tutorialu: Dodawanie własnych kontrolek na mapę

Własne nazwy trybów mapy?

Możliwa jest zamiana standardowych nazw trybów mapy, a także tekstów, pokazujących się w momencie, gdy niedostępne są zdjęcia lub mapy na danym poziomie przybliżenia. Sposób zmiany tekstów poruszony jest w poradniku Zmiana domyślnych komunikatów mapy.

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Zdarzenia

• 1.Pierwsza mapa
• 2.Dodawanie znaczników na mapę
• 3.Zmiana domyślnej ikony znacznika
• 4.Popularne, darmowe ikony dla markerów
• 5.Wyświetlanie informacji na mapie
• jesteś tu!Wbudowane kontrolki i sterowanie
• 7.Zdarzenia
• 8.Polilinie
• 9.Obliczenia
• 10.Wczytywanie danych z pliku XML
• 11.Geokodowanie adresów
• 12.Optymalizacja wyświetlania dużej ilości znaczników
• 13.Debugowanie skryptów dla początkujących