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.

Obsługa klawiatury

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

API Google Maps umożliwia przechwytywanie i obsługę zdarzeń, następujących po wciśnięciu dowolnego klawisza na klawiaturze. W tej części kursu dowiesz się, jak można to osiągnąć.

Włączenie obsługi strzałek

Google Maps API ma wbudowaną obsługę przesuwania mapy za pomocą strzałek na klawiaturze. Aby podpiąć obsługę tych klawiszy do twojej mapy, wystarczy, że stworzysz nowy obiekt klasy GKeyboardHandler, którego konstruktor przyjmuje jeden argument - odwołanie do obiektu mapy, która ma być obsługiwana:

mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);   
new GKeyboardHandler(mapa);

Niestety, to nie wszystko. Jeśli pozostawisz kod w takiej postaci, to mapa będzie obsługiwać strzałki, ale tylko wtedy, jeśli wcześniej ustawisz jej focus, np. klikając na nią. Trzeba więc napisać odpowiedni skrypt, który ustawi focus na mapie od razu na starcie, by można było bez żadnych dodatkowych akcji przesuwać mapę strzałkami.

Nie istnieje żadna prosta funkcja, która automatycznie ustawiłaby focus. Aby to zrobić, należy posłużyć się małym obejściem, nakazując odpalenie zdarzenia click na mapie (jako elemencie dokumentu):

GEvent.trigger(document, "click", {srcElement: document.getElementById("mapka"), target: document.getElementById("mapka"), nodeType: 1});

Ten kod jest może się wydawać niezrozumiały, ale na szczęście pełni swoją rolę bardzo dobrze. Najprościej ujmując, metoda trigger() obiektu GEvent wywołuje kliknięcie ("click") na dokumencie (document), pozostałe parametry zawarte są w tablicy, w której kluczowe jest przypisanie obiektu mapy (document.getElementById("mapka")) do kluczów, definiujących co właściwie kliknęliśmy (srcElement i target).

Po zastosowaniu takiego zabiegu, będziemy w stanie przesuwać elegancko mapę za pomocą klawiatury: