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.

Wbudowane kontrolki i sterowanie

Ten artykuł dotyczy najnowszej wersji API

« 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

Kontrolka

Kontrolka ta pozwala na zmianę poziomu przybliżenia myszą za pomocą ekranowego suwaka, a także przesuwanie mapy w cztery strony świata za pomocą odpowiednich przycisków. Aby dodać kontrolkę do mapy, należy ustawić opcjonalny parametr navigationControl w opcjach mapy na wartość true, na przykład:

var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	navigationControl: true,
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 

W linii 6 ustawiono własność disableDefaultUI na false. Dzięki temu, API na starcie nie wyświetli automatycznie żadnej kontrolki - to twórca aplikacji będzie decydował, którą kontrolkę dodać do mapy.

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 (ROADMAP)
  • tryb satelitarny - zdjęcia satelitarne (SATELLITE)
  • tryb hybrydowy - zdjęcia satelitarne z nakładką z nazwami ulic (HYBRID)
  • tryb terenowy (TERRAIN)

Wyboru pomiędzy nimi można dokonać myszką, za pomocą kontrolki MapTypeControl:

Kontrolka

Udostępnienie kontrolki sprowadza się do dodania jednej linijki (linia numer 8: mapTypeControl: true):

var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	mapTypeControl: true
};

Przykład:
przykład 2pokaż kod przykładu

Jeżeli nie chcesz pokazywać wszystkich czterech trybów mapy, można łatwo poinstruować API, które z nich mają znaleźć się w kontrolce wyboru:

G_NORMAL_MAP
MapTypeId.ROADMAP
G_SATELLITE_MAP
MapTypeId.SATELLITE
G_HYBRID_MAP
MapTypeId.HYBRID
G_PHYSICAL_MAP
MapTypeId.TERRAIN

W tym celu należy ustawić opcje kontrolki mapy, które zmienia się tak:

var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	mapTypeControl: true,
	mapTypeControlOptions:
	{
		mapTypeIds: [
			google.maps.MapTypeId.ROADMAP,
			google.maps.MapTypeId.SATELLITE,
			google.maps.MapTypeId.TERRAIN
		]
	}
};

mapTypeIds to tablica, w której każdy element jest stałą, odpowiadającą żądanej mapie. Uruchomienie kodu z powyższego listingu wyświetli jedynie trzy tryby mapy: mapę drogową, mapę satelitarną i mapę terenową. Kolejność ich wyświetlania będzie zgodna z kolejnością, z jaką zostały zapisane w tablicy.

Przykład:przykład 3pokaż kod przykładu

Kontrolka podziałki skali

Skala Google Maps API

Do mapy możesz również dodać podziałkę skali. Aby to zrobić, należy ustawić na true opcję scaleControl:

var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	scaleControl: true,
};

Przykład działania: przykład 4pokaż kod przykładu

Wszystko razem

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

var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	mapTypeControl: true, // kontrolka trybu mapy
	scaleControl: true, // kontrolka skali
	navigationControl: true // kontrolka nawigacji
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 

Cały przykład: przykład 5pokaż kod przykładu

Style kontrolki nawigacji

Trzecia wersja API pozwala na rysowanie kontrolek o różnych wyglądach, w zależności od urządzenia, na którym mapa jest wyświetlana:

Kontrolka standardowa
Standardowa
ZOOM_PAN
Kontrolka uproszczona
Uproszczona
SMALL
Kontrolka Android
Android
ANDROID

Każdy obrazek podpisano nazwą stałej, zawierającą definicję kontrolki. Stałe znajdują się w przestrzeni google.maps.NavigationControlStyle, co oznacza, że używa się je w postaci np. google.maps.NavigationControlStyle.ANDROID. Czwartą stałą jest DEFAULT, dzięki której tryb mapy zostanie automatycznie dobrany w zależości od urządzenia, na którym mapę wyświetlono (na przykład na mobilnych urządzeniach będzie to kontrolka ANDROID, na dużych mapach na komputerach ZOOM_PAN, podczas gdy na małych mapach SMALL.

Styl wyświetlania kontrolki ustawia się poprzez własność navigationControlStyle w sposób następujący:

var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	navigationControl: true, // kontrolka nawigacji
	navigationControlOptions:
	{
		style: google.maps.NavigationControlStyle.ANDROID // w stylu ANDROID
	}
};

Przykład 6 zawiera kontrolkę nawigacji w stylu ANDROID: przykład 6pokaż kod przykładu

Style kontrolki trybu mapy

Dostępne są dwa style wyświetlania trybów mapy:

Kontrolka rozwijana
Rozwijana
DROPDOWN_MENU
Kontrolka pozioma
Pozioma
HORIZONTAL_BAR

Znajdują się w przestrzeni google.maps.MapTypeControlStyle. Trzecią opcją jest tryb DEFAULT, który dobiera rodzaj kontrolki w zależności od dostępnej szerokości mapy. Styl zmienia się następująco:

var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	mapTypeControl: true, // kontrolka trybu mapy
	mapTypeControlOptions:
	{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU // w stylu rozwijanego menu
	}
};

Przykład menu rozwijanego: przykład 7pokaż kod przykładu

Pozycjonowanie kontrolek

Domyślnie, kontrolki umieszczane są w miejscu, które zostało określone z góry przez API. Możliwa jest zmiana tego zachowania. Jest dziewięć możliwości zaczepienia kontrolki

Możliwości zaczepienia

Wszystkie wymienione wyżej stałe znajdują się w przestrzeni google.maps.ControlPosition. Oto przykład, w którym dodano wszystkie kontrolki w niestandardowych pozycjach:

var opcjeMapy = {
	zoom: 10,
	center: wspolrzedne,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	disableDefaultUI: true,
	mapTypeControl: true, // kontrolka trybu mapy
	scaleControl: true, // kontrolka skali
	navigationControl: true, // kontrolka nawigacji
	
	navigationControlOptions:
	{
		position: google.maps.ControlPosition.TOP_RIGHT // kontrolka nawigacji w prawym, górnym rogu
	},
	mapTypeControlOptions:
	{
		position: google.maps.ControlPosition.TOP // kontrolka trybu mapy na górze
	},
	scaleControlOptions:
	{
		position: google.maps.ControlPosition.TOP_LEFT // kontrolka skali w lewym górnym rogu
	}
};

Oto wynik działania: przykład 8pokaż kod przykładu

Przejdź do kolejnej części kursu

Kolejna część kursu jest w trakcie opracowania. Zapraszamy wkrótce!

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

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Kategorie markerów i polilinii

API v3

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


Dostosowanie powiększenia do markerów

API v3

Kurs pokazuje, jak wyświetlić mapę tak, by wszystkie markery były widoczne


Pierwsza mapa

API v3

Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować


Dodawanie znaczników na mapę

API v3

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



Dyskusja, komentarze