Google Maps to niezwykle przydatne narzędzie. Poza możliwością szukania miejsc i tras udostępnia API, które pozwala na tworzenie nawet bardzo zaawansowanych aplikacji wykorzystujących mapy. W tym wpisie postanowiłem przedstawić krótkie wprowadzenie do API w wersji 3.
Przykład omawiany w tym wpisie będzie budowany z wykorzystaniem API w wersji 3.
Jak to działa?
Działa to dość prosto. Praca sprowadza się do tego, że najpierw trzeba podpiąć odpowiednią bibliotekę Google. Następnie stworzyć w kodzie strony odpowiedni kontener na mapę. A na koniec korzystając z biblioteki Google Maps API i Java Script można stworzyć na stronie odpowiedni mechanizm wyświetlający mapę.
Krok 1: Podłączenie biblioteki Google Maps API
Podpięcie do strony biblioteki wymaga dodania następującej linijki kodu:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
Od tego momentu na stronie możliwe jest korzystanie z Google Maps API.
Krok 2: Kontener dla mapy
Bardzo ważnym elementem korzystania z map jest stworzenie na stronie kontenera, w którym będzie wyświetlana mapa. Pozniżej zaprezentowany jest kod, który tworzy kontener o identyfikatorze map_canvas. Identyfikator ten będzie wykorzystywany podczas generowania mapy.
<div id="map_canvas" style="width: 600px; height: 500px;"></div>
W podanym przykładzie mapa ma wymiary 600 na 500 pikseli. Nic nie stoi na przeszkodzie, żeby wymiary mapy przyjęły dowolne wartości.
Krok 3: Obsługa mapy plus jQuery
Ostatni etap dla tego prostego przykładu to stworzenie funkcji, która zainicjuje działanie mapy oraz doda na niej jeden marker. W tym przypadku będzie to marker pokazujący Lotnisko im. Chopina w Warszawie.
Znajdująca się poniżej funkcja odpowiada za utworzenie mapy hybrydowej wyśrodkowanej na lotnisko im. Chopina z markerem na nie wskazującym:
function google_maps_initialize()
{
var lotniskoWarszawa = new google.maps.LatLng(52.172517,20.973716);
var myOptions =
{
zoom: 16,
center: lotniskoWarszawa,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions)
var marker = new google.maps.Marker(
{
map: map,
position: lotniskoWarszawa
});
}
Zmienna lotniskoWarszawa zawiera współrzędne geograficzne lotniska. W podanym przykładzie należy podać dokładne współrzędne punktu jaki ma być wskazywany, ale biblioteka Google Maps oferuje narzędzie tłumaczące adresy na współrzędne geograficzne. Temat ten wybiega poza zakres tego wspisu i będzie poruszony w osobnym.
var lotniskoWarszawa = new google.maps.LatLng(52.172517,20.973716);
Następnie ustawiane są parametry mapy. W tym przypadku ustawiany jest zoom określający przybliżenie mapy. Czym wyższa wartość tym przybliżenie jest większe. Następny parametr to center określający punkta jaki ma się znaleźć na środku mapy. W tym wypadku będą to współrzędne wskazywane przez zmienną lotniskoWarszawa. Ostatnia wartość to wybranie typu mapy. Tutaj będzie to mapa hybrydowa.
var myOptions =
{
zoom: 16,
center: lotniskoWarszawa,
mapTypeId: google.maps.MapTypeId.HYBRID
}
Kolejny krok polega na utworzeniu w kontenerze o indetyfikatorze map_canvas mapy zgodnie z ustawieniami zapisanymi w zmiennej myOptions.
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions)
Ostatni etap to utworzenie markera. W tym celu należy wskazać zmienną zawierającą mapę oraz lokalizację w jakiej ma być umieszczony marker. W omawianym przykładzie jest to lokalizacja lotniska, czyli marker powinien pokazać się na środku mapy.
var marker = new google.maps.Marker(
{
map: map,
position: lotniskoWarszawa
});
}
Na koniec warto wykorzystując jQuery stworzyć wyzwalacz funkcji tworzącej mapę Google dopiero po pełnym załadowaniu strony:
$(document).ready(function()
{
google_maps_initialize()
});
Przykładowa mapa
Poniżej znajduje się mapa będąca efektem działania omawianego przykładu:
Podsumowanie
I to w sumie wszystko co jest nieznędne do uruchomienia mapy. Tymi paroma krokami można stworzyć mapę na własnej stronie. W kolejnych wpisach na temat Google Maps opiszę bardziej zaawansowane opcje, a dla tych, którzy są mniej cierpliwi polecam lekturę dokumentacji Google Maps API V3 dostarczanej przez Google.
