Google Maps Api

Czym jest Google Maps? Google Maps to jeden z serwisów firmy Google, który z założenia ma być bazą danych map oraz zdjęć satelitarnych i lotniczych całego świata. Najprostszym sposobem wstawienia mapy Google na własną stronę www jest skorzystanie z kreatora. Kreator generuje mapę z pojedynczym markerem. Nie trzeba się rejestrować w celu uzyskania API keya, ponieważ kreator sam go generuje dla podanej domeny. Po wygenerowaniu kodu wystarczy skopiować go na swoją stronę. Podziel kod na dwie części. Fragment kodu podobny do poniższego

  <div id="mapsearch">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

wstaw na stronie w miejsce gdzie chcesz aby mapa była wyświetlana. Resztę kodu wstaw w sekcji head

Google Maps API

Google Maps API to interfejs umożliwiający wstawienie własnej mapy na dowolną stronę www. Do korzystania z niego wymagany jest bezpłatny klucz, który może uzyskać każdy użytkownik konta Google. Klucz ten pozwala na dostęp do API z jednej domeny lub katalogu domeny. System umożliwia bezpłatne zintegrowanie ze stroną internetową mapy. API jest stale rozwijane, dodawane są kolejne funkcjonalności. Daje to wiele możliwości w tworzeniu ciekawych serwisów z jego wykorzystaniem. W wersji 3 Google Maps API klucz nie jest wymagany. Mój tutorial oparty jest jednak o wersję 2 api.

Pierwsze kroki...

Zabierzmy się wreszcie za stworzenie pierwszej mapki z Google Maps API. Stwórzmy prostą stronę html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Pierwsza mapa</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=API_KEY" type="text/javascript"></script>
    </head>
    <body onload="init()" onunload="GUnload()">
<div id=”mapa” style="width: 500px; height: 400px"></div>
</body>
</html>

Zwróćmy uwagę, że wstawiony został znacznik script ładujący API. Tekst API_KEY należy zastąpić kluczem, który można wygenerować na stronie. Strony uruchamiane z dysku komputera nie muszą posiadać klucza. Treść skryptu umieścimy w sekcji head (należy wtedy zastosować funkcję onload).

function init()
{
    if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("mapa"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GlatLng(51.7592485,19.4559833),7);
    }
}

Najpierw sprawdzamy czy przeglądarka jest kompatybilna. Jeśli tak wykonujemy nasz kod. Tworzymy nowy obiekt mapy i zapisujemy go pod zmienną map. Przy tworzeniu obiektu Gmap2 musimy podać argument oznaczający uchwyt do elementu html, gdzie ma być umieszczona mapka (w naszym przypadku div o identyfikatorze mapa). Linijka zawierająca map.setCenter ustawia miejsce wycentrowania mapy i poziom zoomu (u nas 7). Możliwe wartości poziomu zoomu to od 0 do 19. Punkt musi być przekazany jako obiekt klasy GLatLng, który przyjmuje dwa argumenty – współrzędne centrowania (szerokość i długość geograficzna). Do funkcji setCenter można dodać również opcjonalny dodatkowy argument określający typ mapy. Do wyboru mamy: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP oraz G_PHYSICAL_MAP. Dodamy teraz kontrolki sterowania i wyboru mapy. Można to uczynić z pomocą funkcji addControl(). Jako argument funkcji podajemy rodzaj kontrolek, które chcemy wyświetlić. Dla podstawowej nawigacji mamy do wyboru: GsmallZoomControl(), GSmallMapControl() i GlargeMapControl(). Ostatni z nich jest najbardziej rozbudowany. Możemy dodać również kontrolkę zmiany trybu mapy. Jako argument dla addControl() należy wtedy podać: new GmapTypeControl(). Można obejrzeć działający przykład.