Dzięki mapom można pokazywać całe trasy przejazdu, zaznaczać powierzchnie (można również wyliczać jej obszar), nanosić punkty podzielone na kategorie oraz wiele innych opcji.
Od niedawna istnieje możliwość oglądania map w trójwymiarze - wersja Google Earth na stronie internetowej. Aby było to możliwe musimy pobrać odpowiedni plugin dla przeglądarki. Niestety nie działa on na wszystkich przeglądarkach. Zobacz listę wspieranych przeglądarek.
Tutaj znajduje się dokumentacja prosto od Google. Warto się z nią przywitać i zaprzyjaźnić :)
Aby umieścić mapę na swojej stronie konieczne jest wygenerowanie dla niej klucza. Konkretnie chodzi o klucz API. Wygeneruj go tutaj.
Gdy mamy już klucz API możemy zaczynać.
Na początek tworzymy prosty dokument xHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name=author content="robos85" />
</head>
<body>
<div id="mapa" style="width:500px;height:300px;"></div>
</body>
</html>
Nic trudnego.
Aby móc używać map Google musimy je wywołać. Należy dodać kod JavaScript, najlepiej w nagłówku strony. Kod wygląda tak:
<script type=text/javascript>
function mapa_ini(){
if(GBrowserIsCompatible()){
var mapa = new GMap2(document.getElementById("mapa"));
mapa.setCenter(new GLatLng(53.4292, 14.5624 ), 10);
}
}
</script>
* Linii 1, 2 oraz 6, 7, 8 nie trzeba objaśniać :)
* Linia 3 - sprawdzamy tutaj, czy przeglądarka obsługuje wyświetlanie oraz obsługę map.
* Linia 4 - tworzymy wyżej wspomniany obiekt mapy. Pierwszym argumentem, a zarazem jedynym wymaganym, jest element, w którym mapa będzie wyświetlana. W tym przypadku jest to kontener o id="mapa".
* Linia 5 - centrujemy mapę na określonych współrzędnych za pomocą funkcji setCenter utworzonego linijkę wyżej obiektu mapa. Metoda ta musi zostać wywołana przed wszystkimi innymi operacjami dokonywanymi na mapie. Najlepiej wykonać ją zaraz po utworzeniu obiektu. setCenter przyjmuje 3 argumenty - współrzędne środka, poziom zoomu oraz typ mapy.
o Współrzędne muszą być podane jako obiekt klasy GLatLng. Jej parametry to kolejno współrzędne x - szerokość geograficzna oraz y - długość geograficzna.
o Zoom przyjmuje wartość 0-19. Im większy zoom, tym większe przybliżenie.
Ustawiając zoom na 19 osiągamy maksymalne możliwe przybliżenie. Zoom ustawiony na 0 spowoduje pokazanie praktycznie całego obszaru globu.
o Trzeci parametr jest opcjonalny.
Na sam koniec pozostało nam zainicjować mapę po załadowaniu się strony. Zrobię to, edytując tag body . Po edycji wygląda on tak:
<body onload="mapa_ini()" onunload="GUnload()">
Zdarzenie onload powoduje wywołanie funkcji mapa_ini(). onunload natomiast wywołuje funkcję GUnload(), zwalniającą pamięć po mapa_ini().
Kod jest kompletny i wygląda następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name=author content="robos85" />
<title>Mapka Google</title>
<script src=http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAVqmFXwk_S7pa-iIwi-SRshS9TqvuX5c4hoNkPyfLIXlphs3NrxRf9cUsLdemj0PFrduVnxQC7GsQnQ type=text/javascript></script>
<script type=text/javascript>
function mapa_ini(){
if(GBrowserIsCompatible()){
var mapa = new GMap2(document.getElementById("mapa"));
mapa.setCenter(new GLatLng(53.4292, 14.5624 ), 10);
}
}
</script>
</head>
<body onload="mapa_ini()" onunload="GUnload()">
<div id="mapa" style="width:500px;height:300px;"></div>
</body>
</html>
Efekt jego działania można zobaczyć tutaj.
Jak widać mapa jest bardzo uboga. W kolejnych wpisach poświęconych mapom Google postaram się pokazać jak usprawnić oraz upiększyć mapę, aby nabrała funkcjonalności.
Mam nadzieję, że dzięki temu wpisowi łatwiej będzie Wam zrozumieć jak wstawić mapę Google na własną stronę.
