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.

Przejście z mapy statycznej w dynamiczną

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W kursie zaprezentowałem korzyści, płynące ze stosowania statycznych map Google. Za chwilę zobaczysz, jak za pomocą kombinacji mapy statycznej i dynamicznej stworzyć stronę, która zawiera mapę statyczną, a po której kliknięciu wczytana zostanie mapa dynamiczna.

Przygotowanie

Załóżmy, że mapa ma być domyślnie wycentrowana w punkcie (52.321214,16.325512) na poziomie przybliżenia 12, a także ma na nią zostać wstawiony jeden zwykły marker w tym samym punkcie. Ponieważ mapy statyczne posiadają jedynie tryb prezentowania mapy, to początkowo wybranym trybem niech będzie zwykła mapa G_NORMAL_MAP. Kontener, w którym znajdować będzie się mapa musi wyglądać następująco:

<div id="mapka" class="nieaktywna" onclick="mapaStart()" title="Kliknij, aby aktywować mapę!"></div>  

Po najechaniu myszą będzie wyświetlany dymek "Kliknij, aby aktywować mapę!", a po kliknięciu na kontener wykonana zostanie funkcja mapaStart(). Co zrobić, by na starcie w kontenerze była mapa statyczna? Nic prostszego, oto odpowiedni fragment kodu CSS:

#mapka.nieaktywna
{
	cursor: pointer;
	border: 1px solid black;
	width: 500px;
	height: 300px;
	background: url('https://maps.google.com/staticmap?center=52.321214,16.325512&markers=52.321214,16.325512,red&size=500x300&zoom=12&sensor=false&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRlez1kYtfYyIayPXhVYvqRXxDfwRTG4Nb3AzYoqs59diCfw0oKlXXRrg');
}

Mapka będzie stylowana zgodnie z tym kodem w stanie "nieaktywnym". Po kliknięciu na nią przełączymy ją na stan "aktywny", którego wygląd będzie definiowany następująco:

#mapka.aktywna
{
	border: 1px solid black;
	width: 500px;
	height: 300px;
	background: gray;
}

Czas na kluczową funkcję, która jest dość prosta - odpowiada za stworzenie mapy, wstawienie jej do kontenera a także zmianę jego parametrów i zachowań:

function mapaStart()   
{   
	var kontener 		= document.getElementById("mapka");
	kontener.onclick 	= function () {}; // wyłączamy możliwość ponownej aktywacji
	kontener.title		= ''; // resetujemy etykietę
	kontener.className 	= 'aktywna'; // ustawiamy nazwę klasy na "aktywną"
	window.onunload 	= GUnload; // przy wyjściu ze strony zwalniamy pamięć

    if(GBrowserIsCompatible())
    {
        var mapa = new GMap2(document.getElementById("mapka"));
		mapa.addControl(new GLargeMapControl());
		mapa.addControl(new GMapTypeControl());
        mapa.setCenter(new GLatLng(52.321214,16.325512),12,G_NORMAL_MAP);
		mapa.addOverlay(new GMarker(new GLatLng(52.321214,16.325512)));
    }
}

W linii 4 zmieniamy zachowanie przy kliknięciu na kontener tak, by nie wstawiał stale nowej mapy do kontenera. W linii 5 resetujemy dymek, który wyświetlał się po najechaniu myszą na kontener. W linii 6 ustawiamy nazwę klasy na aktywna, by zmienić tło i kursor na standardowe. W następnej linii nakazujemy przeglądarce wykonać funkcję GUnload() w czasie opuszczania strony, by zwolnić zajmowaną pamięć. Zwróć uwagę, że w tagu body nie będzie ani atrybutu onload ani onunload, tak jak to było w pozostałych przykładach na tej stronie.

Oto efekt tego krótkiego omówienia: