Az elmúlt hetekben két honlap elkészítésénél is előkerült a Google térkép beillesztés lehetősége. Egyedi megoldás kellett, nem volt elég a Drupal Gmap és Location modulok használata. Beleástam hát magam az API használatába, és kiderült, hogy rengeteg izgalmas dolgot tud.
Ezért úgy döntöttem írok egy bejegyzés sorozatot, amiben megmutatom az Google Maps Javascript API használatát. Tőlem szokatlan módon, rövid, egyszerű példa kódok használatával mutatom be a lehetőségeket. Vágjunk is bele:
A legegyszerűbb példa
Nézzük meg a létező legegyszerűbb HTML és JavaScript kódot, amivel beépíthetünk egy Google térképet az oldalunkba a Javascript API használatával. Ennél egyszerűbb példa nincs.
HTML
<body onload="initialize()">
<div id="terkep"></div>
</body>
Egy terkep id-vel rendelkező div-et helyezünk ez al oldalon, ebbe kerül majd a térkép. Az oldal betöltődésekor pedig meghívjuk az initialize() függvényt.
CSS
<style type="text/css">
#terkep {
height: 400px;
width: 600px;
}
</style>
Semmi izgalmas nem történik itt, DIV#terkep-nek megadjuk a szélességét és a magasságát.
A Google Maps API importálása
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Külső Javascript kódként hivatkozunk az Google Térkép programozói felületére, rendes nevén az API-ra. A sensor=false paraméter jelentése, hogy egy olyan eszközön fogjuk használni a térkép szolgáltatást, aminek nincs hely meghatározó szenzora. Egy webes böngésző ilyen. Egy okostelefon esetében már lehetne igazra állítani a sensor paramétert.
A lényeg, az inicializáló függvény
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(47.193445480491455, 19.514465109374996);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("terkep"), myOptions);
}
</script>
Elérkeztünk a lényeghez.
Először egy latlng nevű objektumot hozunk létre, a google.maps.LatLng nevű függvénnyel. Ez lesz majd a térkép közepe. Két paramétere van, a szélességi és hosszúsági koordináták.
A myOptions objektummal fogjuk felparaméterezni a készülő térképet. A zoom értéke azt hiszem egyértelmű, 1 esetén vagyunk a legtávolabb a földtől, ahogy növekszik, úgy „közeledünk” a földhöz. A center az imént létrehozott középpontot határozza meg. A mapTypeId pedig a térkép típusát határozza meg, jelen esetben a normál térkép nézet, ahol csak utakat látunk. Magyarul, nincsenek szatellit képek.
Végül, az utolsó sorban, felhasználva a fentieket létrehozzuk a térképet a google.maps.Map nevű függvénnyel/objektummal, kinek, hogy tetszik. Első paramétere az a DOM objektum, ahova a térkép kerülni fog, második paramétere pedig a fent létrehozott myOptions beállítások. A DOM objektumot a szokásos document.getElementById függvénnyel szerezhetjük meg.
Demo
Az egész működés közben itt nézhető meg:
http://edgarpe.hu/sites/default/files/gmaps-api-1-hello-terkep.html
Megjegyzések
A Googme Térkép szolgáltatását nem csak JavaScript-el használhatjuk, hanem például Flashben is.
A teljes Google Maps API dokumentációja angolul:
http://code.google.com/apis/maps/index.html
A példa kódok a fenti dokumentáció alapján készültek, az ott található kódok átalakított változatai.
Egy-két példa már be van tárazva, de ha leírjátok mit nézzünk, akkor lesznek olyan példák is. Persze, csak ha meg tudom oldani :)
Zoli barátom az F1világ.hu-nál szombat délelőtt 10:30-kor írt egy email-t, hogy nem megy az oldalon a Facebook Like gomb, nézzek rá mi lehet a gond. Ha rákattintok felvillan a számláló, de rögtön vissza is áll alapállapotba.
