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

if(GBrowserIsCompatible())  
{
	var mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP]});
	mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);   
	
	// otwieramy okno informacyjne w punkcie (53.4193,14.5816)
	mapa.openInfoWindowHtml(new GLatLng(53.4193,14.5816),'To nasze pierwsze okienko informacyjne');
}

Funkcja, która otwiera okienko nazywa się openInfoWindowHtml() i przyjmuje dwa parametry - pierwszy to punkt - obiekt klasy GLatLng - reprezentujący zaczepienia (miejsce, na które "wskazuje" podstawa dymka), a drugi to tekst, jaki ma zostać wyświetlony w dymku

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. Wywołanie funkcji openInfoWindowHtml kilka razy spowoduje, że widoczny będzie jedynie dymek otworzony najpóźniej
• 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:

var mapa; // mapa musi być zmienną globalną
if(GBrowserIsCompatible())  
{
	mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP]});
	mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);   
	
	function dodajMarker(lat,lon,txt)
	{
		// tworzymy marker
		var marker = new GMarker(new GLatLng(lat,lon),{title: txt});
		marker.txt=txt;
		mapa.addOverlay(marker);
		GEvent.addListener(marker,"click",function() {
			marker.openInfoWindowHtml(marker.txt);
		});
		
		return marker;
	}
	
	var marker = dodajMarker(53.415,14.78,"Ten dymek został otworzony na markerze");
	
	// otwieramy okno informacyjne na markerze
	marker.openInfoWindowHtml(marker.txt);
}

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

• W linijkach 7-18 znajduje się funkcja, tworząca marker, i zwracająca odwołanie do niego (przyda się później).
• W linijce 10 tworzymy marker o współrzędnych lat i lon oraz podpisie title (są to parametry funkcji dodajMarker())
• W linijce 11 ustawiamy właściwość txt markera na tekst, który ma się wyświetlić w dymku
• W linijce 12 marker zostaje wstawiony na mapę (ważne!)
• W linijkach 13-15 zastosowano funkcję, która odpowiada za wyświetlenie okienka informacyjnego po kliknięciu na marker. Ten temat zostanie poruszony w siódmej części kursu.
• W linijce 20 następuje wywołanie funkcji dodajMarker() z odpowiednimi parametrami, a zwracana wartość zostaje przechowana w tymczasowej zmiennej marker
• W linijce 23. otwieramy dymek na markerze (tutaj potrzebne jest nam odwołanie, które zwróciła funkcja dodajMarker())

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:

if(GBrowserIsCompatible())  
	{
		
		function dodajMarker(lat,lon,txt)
		{
			// tworzymy marker
			var marker = new GMarker(new GLatLng(lat,lon));
			marker.txt=txt;
			mapa.addOverlay(marker);
			GEvent.addListener(marker,"click",function() {
				marker.openInfoWindowHtml(marker.txt);
			});
			return marker;
		}
	
		mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP]});
		mapa.setCenter(new GLatLng(53.434185236286325,14.512596130371094),13);   
		
		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>');
		marker1.openInfoWindowHtml(marker1.txt);
	}

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

Pokazanie zagnieżdżonej mapy (blow-up)

API posiada ciekawą funkcję, pozwalającą na pokazanie w okienku informacyjnym zagnieżdżonej mapy. Ta funkcjonalność pozwala na przykładowo pokazanie przybliżenia klikniętego obszaru bez konieczności przybliżania mapy głównej.

Funkcja, która pokazuje blow-up nazywa się showMapBlowup() i jest implementowana zarówno przez klasę GMap2 jak i GMarker. Funkcja, wywoływana dla obiektu mapy przyjmuje dwa argumenty - pierwszy to współrzędne zaczepienia okienka, drugi to opcje. Funkcja wywołana dla markera przyjmuje tylko jeden argument - opcje. W tym przypadku okienko zostanie otworzone na markerze.

W kolejnym przykładzie zaprezentowana zostanie aplikacja, która pokazuje w okienku przybliżenie klikniętego obszaru, lub przybliżenie obszaru klikniętego markera. Kluczowe są akcje, wywoływane przy kliknięciu:

GEvent.addListener(mapa,'click',function()
{
	if(arguments[0] && arguments[0].getPoint)
		var punkt = arguments[0].getPoint();
	else if(arguments[1])
		var punkt = arguments[1];
	else
		return;
	mapa.showMapBlowup(punkt,{mapType: G_SATELLITE_MAP, zoomLevel: 17});
});

Kliknięcie wywołuje nienazwaną funkcję z dwoma argumentami - jeśli kliknięto na marker/polilinię, to odwołanie do klikniętego obiektu przekazywane jest jako pierwszy argument. W przeciwnym wypadku w drugim argumencie przekazywane są współrzędne punktu, na który kliknięto. W linii 3 sprawdzamy, czy pierwszy argument jest podany (co oznacza, że kliknięto w marker lub polilinię), następnie sprawdzamy, czy istnieje metoda o nazwie getPoint klikniętego obiektu, czym wykluczymy kliknięcia polilinii, która tej metody nie posiada. Jeśli udało nam się stwierdzić, że kliknięto na marker, to jego współrzędne zapiszemy do zmiennej punkt. Jeśli nie kliknięto na obiekt, ale podano drugi argument, to zmiennej punkt przypisujemy te współrzędne. W przedostatniej linijce otwieramy blow-up z opcjonalnymi parametrami: typem mapy G_SATELLITE_MAP (satelita) i poziomem zoom 17 (możesz dowolnie ustawić te parametry a nawet je ominąć - zostaną zastosowane domyślne).

Oto rezultat działania: przykład 4pokaż 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
• 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