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 Porzucenie interakcji mapy 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('http://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: przykład 1pokaż kod przykładu

Ładniejszy aktywator

W prosty sposób, za pomocą kilku zmian w kodzie i odrobiny CSS można stworzyć profesjonalnie wyglądający aktywator mapy. Przykład 2 pokazuje, jak to zrobić: przykład 2pokaż kod przykładu

Wczytanie API na żądanie

Nawet pomimo tego, że mapa aktywowana jest dopiero po wyborze użytkownika, skrypty API cały czas są ładowane wraz ze startem strony. Stosując specjalną sztuczkę można spowodować, że API zostanie załadowane dopiero wtedy, gdy zajdzie taka potrzeba. Oszczędza to czas i transfer osób, które nie chcą korzystać z mapy interaktywnej, a są jedynie zainteresowane statyczną częścią strony.

Sztuczkę, umożliwiającą wczytanie API na żądanie użytkownika omówiono tutaj: Wczytanie API na żądanie użytkownika

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Wczytywanie danych z programu MS Excel

API v2

W tym przykładzie pokazane zostało, w jaki sposób wyświetlić markery z arkusza kalkulacyjnego


Własna mapa w Google Maps API

API v2

Przygotowanie i sposób stworzenia własnej mapy, na przykładzie mapy z gry GTA3


Warstwa zdjęć z Panoramio

API v2

Dodaj na swoją mapę eleganckie miniaturki zdjęć okolicy z serwisu Panoramio