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.

Zoom do zaznaczonego obszaru

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Profesjonalne aplikacje, służące do prezentacji danych kartograficznych (np. MapGuide Open Source) posiadają przydatne narzędzie, pozwalające na zaznaczenie pewnego obszaru, a następnie takim ustawieniu parametrów mapy, by widoczny obszar idealnie pokrywał się z zaznaczeniem. W praktyce wygląda to tak, że za pomocą myszy możemy zaznaczyć obszar np. miasta, a mapa zostanie tak wyśrodkowana i przybliżona, by pokazać zaznaczony obszar.

Jak to zrobić w Google Maps API?

Nie ma sensu pisania od nowa czegoś, co ktoś już wymyślił, i w dodatku działa bez zarzutu. W tym przykładzie będę opierał się o darmowe, open-sourcowe rozszerzenie DragZoom, dodające do mapy nową kontrolkę typu DragZoomControl().

Aby korzystać z rozszerzenia, wystarczy dołączyć do kodu strony plik javascript z poniższego adresu:

https://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.2/src/dragzoom.js - wersja normalna

lub

https://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.2/src/dragzoom_packed.js - wersja skompresowana

Skrypt należy dołączyć do strony tak samo, jak skrypt samego API. Polecam ściągnięcie pliku ze skryptem i załadowanie na własny serwer, a następnie podlinkowanie do tak przesłanego pliku

Dodanie kontrolki

Dodanie kontrolki jest ekstremalnie proste - tworzymy nowy obiekt klasy DragZoomControl(), a następnie dodajemy go do mapy za pomocą metody addControl():

mapa.addControl(new DragZoomControl());

Zwróć uwagę, że do strony koniecznie musi być dołączony skrypt rozszerzenia. Oto fragment nagłówka, pokazującego linkowanie (w przykładzie tym plik ze skryptem został skopiowany na własny serwer):

<script src='/examples/054/dragzoom.js' type='text/javascript'></script> 

Tylko tyle kodu wystarczy, by umożliwić efektowną interakcję: