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.

Porzucenie interakcji mapy

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

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

Uwaga! Od marca 2009, obowiązkowe jest dołączenie parametru &sensor=true lub &sensor=false. Z pierwszego należy skorzystać, gdy tworzona przez nas aplikacja ma umożliwiać geolokalizację na podstawie sygnału GPS. W pozostałych przypadkach należy ustawić wartość parametru na false. Ponieważ żaden z przykładów na stronie nie jest przeznaczony na urządzenia przenośne i nie wykorzystuje tym samym możliwości określenia pozycji za pomocą sygnału GPS, wszystkie posiadają wartość parametru sensor ustawioną na 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:

mapa

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


Kategorie markerów i polilinii

API v2

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Wbudowane kontrolki i sterowanie

API v2

Kurs podstaw cz. VI: Dodawanie wbudowanych kontrolek i definiowanie sterowania mapy