Poznaj Google Maps API

Porzucenie interakcji mapy

« powrót do listy kategorii

Mapy Google są interaktywne, pozwalają użytkownikowi przesuwać obszar widzenia czy też zmieniać poziom przybliżenia. Czasem jednak pożądanym zachowaniem może być zablokowanie możliwości przesuwania obszaru widzenia i poziomu przybliżenia (np. dla map dojazdu lub podobnych zastosowań). Ten tutorial pokazuje, jak sprawić, by mapa symulowała "bycie statycznym obrazkiem".

Kroki

Aby mapa udawała statyczny obraz, należy:

1. nie dodawać żadnych kontrolek do nawigacji
2. zablokować przeciąganie
3. zablokować przybliżanie i oddalanie przez podwójne kliknięcie lewym przyciskiem myszy
4. (opcjonalnie, jeśli marker nie posiada żadnych dodatkowych informacji) ustawić pasywne wyświetlanie markerów
5. (opcjonalnie) wyłączyć możliwość kliknięcia na logo Google (najechanie myszą zmienia kursor, zablokujemy to)

Działanie

Oto gotowy kod, który wykonuje powyższe założenia:

function mapaStart()   
{   
    if(GBrowserIsCompatible())
    {   
        var mapa = new GMap2(document.getElementById("mapka"),{logoPassive: true});   
        mapa.setCenter(new GLatLng(53.42222222,14.551944444),16,G_NORMAL_MAP); 
		mapa.addOverlay(new GMarker(new GLatLng(53.42222222,14.551944444),{clickable: false}));
		mapa.disableDoubleClickZoom();
		mapa.disableDragging();
    }   
}  

W linii 5 przekazaliśmy mapie informację, że logo Google ma być nieklikalne (wartość logoPassive ustawiona na true). W linii 7 przy dodawaniu markera również nakazujemy mu być nieklikalnym, poprzez ustawienie własności clickable na false. W liniach 8 i 9 wyłączamy kolejno zmianę zoomu przez podwójne kliknięcie myszką, a potem wyłączamy przeciąganie.

Oto rezultat działania: przykład 1pokaż kod przykładu

Prawdziwy, statyczny obrazek

Od niedawna, Google Maps API umożliwia wygenerowane zwykłego, statycznego obrazka z mapą - idealny, jeśli nie chcesz żadnej interakcji, a rozwiązanie powyżej jest mało satysfakcjonujące. Adres generatora obrazka wygląda następująco:
http://maps.google.com/staticmap

Dołączając do adresu dodatkowe parametry, możemy dostosować mapę do własnych potrzeb. Dostępne parametry to:

• center - określa punkt, w którym mapa jest wycentrowana. Przykładowo: center=52.321214,16.325512. Współrzędne oddzielone są przecinkami, nie ma między nimi spacji ani żadnych dodatkowych znaków
• markers - dodaje marker do obrazka. Wartość składa się z kolejno długości, szerokości geograficznej oraz koloru markera (dostępne: red, blue, green) oddzielonych przecinkami. Przykładowo: markers=52.321214,16.325512,red dodaje marker w zadanych współrzędnych w kolorze czerwonym. Marker może też posiadać ikonkę z literką - dopisz ją wówczas małymi literami od razu po kolorze (np: markers=52.321214,16.325512,redg). Jeśli chcesz dodać kilka markerów, rozdziel je za pomocą znaku | (np. markers=52.321214,16.325512,redg|52.333122,16.309122,greens)
• zoom - ustawia zoom wygenerowanej mapy. Przykładowo: zoom=13
• size - ustawia rozmiar mapy w pikselach, kolejno szerokość i wysokość mapy, oddzielone znakiem "x". Przykładowo: size=500x300
• maptype - rodzaj mapy. Dostępne wartości to roadmap i mobile - różnią się od siebie wielkością wyświetlanych opisów ulic. Przykład: maptype=mobile
• key - Twój klucz do API. Parametr jest wymagany, przykładowo: key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRlez1kYtfYyIayPXhVYvqRXxDfwRTG4Nb3AzYoqs59diCfw0oKlXXRrg
• sensor - określa, czy urządzenie, na którym wyświetlana jest aplikacja ma możliwość geolokalizacji za pomocą sygnału GPS

Powyższe parametry oddziela się w adresie za pomocą znaku &, a przed pierwszym z nich dodatkowo należy postawić znak zapytania (?).
Jeśli nie ustawisz parametru markers, to mapa będzie bez markerów. Oto przykładowy kompletny adres:

http://maps.google.com/staticmap?center=52.321214,16.325512&markers=52.321214,16.325512,red&size=500x300&zoom=12&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRlez1kYtfYyIayPXhVYvqRXxDfwRTG4Nb3AzYoqs59diCfw0oKlXXRrg&sensor=false

Tak przygotowany adres ustawiamy jako URL statycznego obrazka, np:

<img src="http://maps.google.com/staticmap?center=52.321214,16.325512&amp;markers=52.321214,16.325512,redg|52.333122,16.309122,greens&amp;size=500x300&amp;zoom=12&amp;key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRlez1kYtfYyIayPXhVYvqRXxDfwRTG4Nb3AzYoqs59diCfw0oKlXXRrg&amp;sensor=false" alt="mapa" width="500" height="300" />

Co da następujący efekt: