Przejście z mapy statycznej w dynamiczną
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