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.

Wyświetlanie informacji na mapie

Ten artykuł dotyczy najnowszej wersji API

« 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

Od tej części kursu, kod HTML będzie podawany w skróconej postaci - w listingach nie będą zawierane fragmenty kodu, które były poruszane wcześniej a nie są kluczowe w zrozumieniu zagadnienia.
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

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

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)


Geokodowanie adresów

API v3

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)


Wczytywanie danych z pliku XML

API v3

Kurs podstaw cz. X: Omówienie wczytywania danych z pliku XML za pomocą AJAXa