Poznaj Google Maps API

Wyświetlanie informacji na mapie

« powrót do listy kategorii

Google Maps API oferuje ciekawą funkcję wyświetlania przyjemnego dla oka dymka informacyjnego, w którym można umieścić dowolną treść (zarówno tekst jak i obrazki). Może to wyglądać tak, jak na poniższym przykładzie: przykład 1pokaż kod przykładu

Sposób tworzenia

var dymek = new google.maps.InfoWindow(); // zmienna globalna
var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
  zoom: 10,
  center: wspolrzedne,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};		
var mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 
			
dymek.setContent('Pierwsze okienko z informacjami!');
dymek.setPosition(new google.maps.LatLng(53.41935400090768,14.58160400390625));
dymek.open(mapa);

Za wyświetlanie dymka odpowiada obiekt klasy InfoWindow. Obiekt taki posiada dwie metody, których można użyć do sterowania pozycją i zawartością - setContent() i setPosition(). Ich działanie wygląda tak jak w kodzie powyżej - ustawiając treść przekazujemy jeden argument (string), a przy ustawianiu pozycji przekazujemy współrzędne w postaci obiektu LatLng. Współrzędne te będą określały miejsce zaczepienia "podstawy" dymka.

Efektem działania powyższego kodu będzie otwarcie okienka informacyjnego - efekt można zobaczyć na przykładzie 1 przykład 1pokaż kod przykładu

Uwagi

• Naraz może być otworzony co najwyżej jeden dymek. W API v3 możliwe jest otworzenie kilku okienek, ale wiążę się to z koniecznością stworzenia wielu obiektów klasy InfoWindow - po jedym dla każdej instacji.
• Dymek może zawierać kod HTML - np. <strong>tekst</strong> da efekt tekst
• Jeśli dymek będzie przy otwieraniu/tworzeniu wychodził poza krawędź mapy, zostanie ona przesunięta tak, by pokazać go w całości.
• Dymek wyświetla się przy starcie, lecz można go zamknąć kliknięciem na mapę lub na mały x w górnym prawym rogu. Po zamknięciu dymka nie można go otworzyć ponownie. Dynamiczne otwieranie dymków zostanie omówione w jednym z kolejnych rozdziałów, jego namiastka pokazana jest w kolejnym punkcie.

Otwieranie dymka na markerze

Dymek z informacjami może również zostać otworzony na konkretnym markerze. Poniższy przykład przedstawia proste zastosowanie na przykładzie:

function dodajMarker(lat,lng,txt)
{
	var opcjeMarkera =   
	{  
		position: new google.maps.LatLng(lat,lng),  
		map: mapa
	}  
	var marker = new google.maps.Marker(opcjeMarkera);
	marker.txt=txt;
	
	google.maps.event.addListener(marker,"click",function()
	{
		dymek.setContent(marker.txt);
		dymek.open(mapa,marker);
	});
	return marker;
}

var marker = dodajMarker(53.4193,14.5816,'Dymek otworzony na markerze');
google.maps.event.trigger(marker,'click');

Zobacz wynik działania powyższego skryptu na przykładzie 2 przykład 2pokaż kod przykładu

• W liniach 2-17 widać ciało funkcji, dodającej markery. Funkcja ta przyjmować będzie trzy argumenty - kolejno szerokość i długość geograficzną oraz pewien opis markera, który pojawiać się będzie w oknie.
• W liniach 3-7 ustawiamy opcje markera - przypisujemy go do właściwej mapy oraz ustawiamy jego współrzędne (lat i lng - parametry przekazane do funkcji).
• W linii 8 marker zostaje dodany na mapę.
• W linii 9 ustawiamy pewną własność markera (w tym przykładzie jest to własność txt) na przekazany do funkcji tekst opisu. Ta własność przyda się później.
• W liniach 11-15 zastosowano konstrukcję, która odpowiada za wyświetlenie okienka informacyjnego po kliknięciu na marker. Ten temat zostanie poruszony w siódmej części kursu.
• W linii 16 zwracamy odwołanie do markera (ważne).
• W liniach 19-20 widać sposób użycia napisanej funkcji. Ostatnia linijka symuluje kliknięcie myszą na marker tak, by okienko z informacją wyskoczyło na samym początku działania aplikacji.

Funkcjonalna aplikacja

Mając informacje o tworzeniu markerów i dymków, można pokusić się o napisanie pierwszej funkcjonalnej aplikacji, np. takiej jak ta na początku tej części kursu. Oto fragment jej kodu:

function mapaStart()   
{   
	var wspolrzedne = new google.maps.LatLng(53.434185236286325,14.512596130371094);
	var opcjeMapy = {
	  zoom: 13,
	  center: wspolrzedne,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 
	var marker1 = dodajMarker(53.439068183003684,14.518346786499023,'<strong>Uniwersytet Szczeciński</strong><br />Wydział Nauk Ekonomicznych i Zarządzania<br /><a href="http://www.wneiz.pl">www.wneiz.pl</a>');
	var marker2 = dodajMarker(53.42235902258507,14.489099979400635,'<strong>Gimnazjum nr 20</strong><br /><a href="http://www.gm20.szczecin.pl">www.gm20.szczecin.pl</a>');
	var marker3 = dodajMarker(53.429570208134976,14.537014961242676,'<strong>I Liceum Ogólnokształcące</strong><br />im. Marii Curie Skłodowskiej<br /><a href="http://www.lo1.szczecin.pl">www.lo1.szczecin.pl</a>');
	google.maps.event.trigger(marker1,'click');
}   

Pełny kod źródła dostępny jest w przykładzie 3 przykład 3pokaż kod przykładu

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Wbudowane kontrolki i sterowanie

• 1.Pierwsza mapa
• 2.Dodawanie znaczników na mapę
• 3.Zmiana domyślnej ikony znacznika
• 4.Popularne, darmowe ikony dla markerów
• jesteś tu!Wyświetlanie informacji na mapie
• 6.Wbudowane kontrolki i sterowanie
• 7.Zdarzenia