Google Maps API (część I)
Zawsze sie zastanawiałem jak te śmieszne mapki na gronie są zrobione. I nie tylko tam, w innych miejscach również. Jakoś nie jestem ortodoksyjnym zwolennikiem wszystkiego ze stajni G więc na bieżąco z ich nowinkami również nie byłem - ostatnie mapy o jakich wiedziałem to się nazywały Google Earth i były strasznie toporne. Aż tu nagle ogłoszenie, że szukają programisty JS zaznajomionego z Google Maps API. No to poszukałem i oto jest... krótki kurs, część pierwsza czyli "Wstęp". Może się komuś przyda.
Rejestracja
Na samym początku musimy się zapisać się po Google Maps API key. Rejestracja nie jest skomplikowana, potrzebne nam będzie nam do tego tylko konto Google. Po przeczytaniu najważniejszych zasad (m.in. mapy muszą być dostępne dla każdego i nie można pobierać opłat za korzystanie), regulaminu i podaniu adresu URL na którym będzie nas skrypt z mapą klikamy "Generate API Key". Powinniśmy dostać wygenerowany kod strony, mniej więcej jak na listingu poniżej.
<!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"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=KEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.78, 19.43), 10);
}
}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Jak widać jest to najprostszy szkielet strony XHTML 1.0 Strict z trzema dodatkowymi elementami. Po kolei:
1. API
<script src="http://maps.google.com/maps?file=api&v=2&key=KEY" type="text/javascript"></script>
Zewnętrzny plik JavaScript z tytułowym Google Maps API. W miejsce "KEY" należy podać otrzymany podczas rejestracji klucz. Przypomnę raz jeszcze, że jest on unikalny dla każdego adresu WWW.
2. Kod HTML - mapa
<div id="map" style="width: 500px; height: 300px"></div>
Tutaj trochę od końca. Jak widać, w <body/> jest jeden element <div/>. To właśnie w nim będzie wyświetlana mapa. Możemy mu nadać dowolny kształt, pozycję itp. z użyciem CSS. W naszym przypadku będzie do prostokąt 500x300px, ale równie dobrze możemy nadać mu szerokośc i wysykość 100%, jak na wikimapia.org. Ważne jest natomiast, aby element ten posiadał unikalne id (w moim przypadku po prostu "map").
3. Kod JavaScript
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.78, 19.43), 10);
}
}
To właśnie ta funkcja jest tutaj najważniejsza. Po załadowaniu się strony wstawia w nasz wybrany element mapę i ustawia jej położenie. Aby zadziałała należy w <body/> wstawić atrybut onload="load()". Można oczywiście dodać też kod do jQuery $().ready(); czy jakiegokolwiek innego frameworka, jak kto woli. Na początku sprawdzamy czy nasza przeglądarka jest kompatybilna z mapami, służy do tego funkcja GBrowserIsCompatible();. Jeżeli tak, tworzymy nowy obiekt mapy GMap2(); i zapisujemy go w jakiejś zmiennej, w naszym przypadku po prostu "map". Konstruktor klasy przyjmuje jeden argument, element HTML - w naszym przypadku będzie to nasze <div id="map"/>.
Następnym krokiem jest ustawienie naszej mapy w konkretnym punkcie. Służy do tego metoda SetCenter();. Jako pierwszy argument funkcja przyjmuje obiekt GLatLng. Jest to pojedynczy punkt określający szerokość i długość geograficzną. Warto tutaj zauważyć pewną rzecz, mianowicie z matematycznego punktu widzenia jesteśmy przyzwyczajeni do układu osi (x,y). W przypadku współrzędnych geograficznych jest na odwrót, najpierw podajemy szerokość a potem długość czyli (y,x) patrząc na to matematycznie. Wspominam także dlatego, że istnieje inny obiekt, GPoint który to odwołuje się do konkretnego pixela na mapie i operuje na klasycznym układzie (x,y). Drugi argument, zoom, jest to liczba całkowita z przedziału 0-18. Wartość najmniejsza, zero, pokazuje kilka map połączonych ze sobą. Po co? Aby uzyskać efekt globusa, przewijając mapę w lewo lub prawo nigdy nie napotkamy końca. Wartość 1 pokazuje cały świat, a każda kolejna pokazuje coraz to większe przybliżenie, aż do 18. Od razu mogę powiedzieć, że nie dla każdego obszaru na świecie istnieje maksymalne przybliżenie. Punkt podany przeze mnie (51.78, 19.43) wskazuje mniej więcej na centrum łodzi a więc mniej więcej na centrum Polski.
Podsumowanie
Na początek to tyle. Działający przykład można zobaczyć pod adresem http://niewazne.org/maps/example1-1.html. W następnym odcinku postaram się w skrócie opisać jak dodać kontrolki do mapy aby umożliwić zmianę powiększenia i typu mapy (zdjęcia satelitarne, mapa, hybryda).
±
Komentarze do wpisu "Google Maps API (część I)":
1.
08 grudnia 2007, 15:10:24
Dobre artykuły (dosyć zaawansowane) nt. GMAPI pojawiły się w tym roku w SDJ.
2.
08 grudnia 2007, 15:12:49
Mam małą prośbę – wstaw gdzieś na początku <excerpt> :)
3.
08 grudnia 2007, 17:13:53
Brawo pomysłu. Niedawno właśnie miałem zainteresować się tym API :>. Czekam na dalsze części…
4.
08 grudnia 2007, 17:43:54
W chwili obecnej nie trzeba się już bawić samym API.
Jeśli znajdziemy interesującą nas część świata w maps.google.com to po prostu klikamy: link to this page. Potem już wystarczy wkleić część kodu do siebie na stronę lub bloga.
Zastosowanie opisanej metody ma jeszcze jedną zaletę. Nie ma ograniczenia w ilości wyświetleń mapy dziennie .
Podobnie jak ein, odsyłam do SDJ, dla tych którzy chcieliby użyć produktu Google komercyjnie. Dla większości powinna wystarczyć opcja wstaw link.
5.
08 grudnia 2007, 18:19:22
Może czegoś nie rozumiem, ale co ma wstawianie mapek z maps.google.com na stronę do Google Maps API? Ja nie opisuję tutaj jak wstawić mapkę, którą ktoś sobie może wstawić na bloga aby znajomi wiedzieli jak do niego dojechać. Raczej staram się pokazać pewne możliwości tej aplikacji. Bo korzystając z „link to this page” otrzymujesz najwyżej prostą mapkę wskazująca na konkretne miejsce z 4 podstawowymi kontrolkami, nijak to sie ma do samego API i możliwości jakie oferuje.
SDJ – nie wiem, nie czytałem, ciężko mi sie wypowiedzieć i porównywać nie będę. Natomiast nie wiem co rozumiesz przez „większość” ani „wystarczyć”. Większości twórców stron WWW powinien wystarczyć FrontPage z Office 2000, a zamiast pisać sklepy internetowe i CMSy powinny nam wystarczyć gotowe rozwiązania. Dzięki Bogu nie wystarczają dlatego dzisiejsze strony internetowe zupełnie nie przypominają tych z roku 2000.
Jeżeli chodzi o limity, to może powinienem to opisać dokładniej na samym początku, ale już za późno, dodam w części II. Limit 500 000 wyświetleń na dobę nie jest tak naprawdę limitem – Google tylko prosi żeby wcześniej dać znać aby byli na takie obciążenie przygotowani. Prawdziwy limit jest na „geocode requests” i wynosi 50 000 / dobę. Przez „geocode request” rozumie się zamianę adresu np. „Lutomierska 115” na koordynaty geograficzne np. 51,19. I akurat tego obejść się nie da przez wstawianie mapki z maps.google.com ani w żaden inny, znany mi sposób.
6.
09 grudnia 2007, 13:03:48
„Natomiast nie wiem co rozumiesz przez „większość” ani „wystarczyć”. Większości twórców stron WWW powinien wystarczyć FrontPage z Office 2000, a zamiast pisać sklepy internetowe i CMSy powinny nam wystarczyć gotowe rozwiązania. Dzięki Bogu nie wystarczają dlatego dzisiejsze strony internetowe zupełnie nie przypominają tych z roku 2000.”
Poprzeglądaj internet, a zobaczysz o czym mówię.
A to, że strony nie wyglądają jak w 2000 roku to nie całkowita zasługa webmasterów, a ludzi (instytucji) którzy wdrażają nowe technologie. Niewielu w 2000 roku słyszało o xhtml, a tym bardziej RSS. Na szczęście ten trend się zmienia i coraz więcej osób sięga do nowych technologii.
7.
15 grudnia 2007, 14:17:16
Hej!
Czy na stronie firmowej można zastosować taką mapkę, legalnie i za free? Chodzi tylko o lokalizację firmy, bo niezbyt rozumiem warunki licencji. Ja siedzę na joomla i mam fajny plugin, zastanawiam się czy się rejestrować po ten API KEY, bo strona jest firmowa, będzie sklep.
Chodzi tylko o to, żeby nie pobierać kasy za korzystanie z tych map, czy nie można też używać mapek na stronach komercyjnych?
8.
15 grudnia 2007, 14:51:13
Mozesz uzywac na stronach komercyjnych ale nie mozesz za uzywanie pobierac oplaty. Czyli jek chesz lokalizacje firmy to jest OK ale juz np. jak kazesz placic smsem za dostep do mapki z listą bankomatów czy czegośtam to juz nie:)
9.
02 września 2008, 21:06:00
stosuję mapki na stronach o nieruchomościach. link .Idealnie się nadają do tego.
Pozdrawiam
10.
11 grudnia 2008, 12:03:28
Nie znam się na tym o czym tu piszecie, ale chciałem zobaczyć na stronie banku lokalizację bankomatu, wtedy system zaczął mnie molestować o wygenerowanie jakiegoś klucza api. O co tu chodzi? Ja mam coś generować żeby zobaczyć coś na obcej stronie?
11.
11 grudnia 2008, 14:17:44
Nie. TO ze stroną jest cos nie tak, sprawdź później :)
Dodaj komentarz:
Jeżeli znalazłeś błąd ortograficzny bądź stylistyczny/gramatyczny, będę wdzięczny za informację. Konkretną i precyzyjną, nie interesują mnie aluzje i wymyślne metafory.
Jednocześnie wszem i wobec informuję, że używam Windows Vista. Jeżeli uważasz, że Twój system jest lepszy i z tego powodu Ty jesteś lepszy, a ja i inni tacy jak ja są gorsi i jest to jedyne co chcesz mi przekazać, to nie trudź się komentowaniem, skasuję.