Itt az ideje, hogy folytassam a Google Maps API példákat. Az első részben a leg alapvetőbb példát néztük meg, a GMaps API „Hello World”-jét. Most is egy egyszerű dolgot fogunk megnézni, az eseményeket.
Események
A térképnek és a rajta elhelyezett objektumoknak különböző eseményei vannak, amikre fel tudunk iratkozni. Egyelőre csak a térkép objektummal tudunk dolgozni, ezért nézzük meg most ezt:
A google.maps.Map objektum eseményei:
- zoom_changed
- center_changed
- bounds_changed
A nevek elég egyértelműen meghatározzák az eseményeket, sorban: ha változik a zoom, ha változik a középpont és ha változik a befoglaló keret. A dokumentáció szerint az első kettőnél még nem biztos, hogy a befoglaló keret is megváltozott, magyarul nem mindig lehet tudni, hogy pontosan mit is tartalmaz a térkép. A bounds_changed eseménynél viszont már lehet, a gyakorlatban is ez a leghasznosabb, így nézzünk ezzel egy példát.
Példa esemény feliratkozásra
A szokásos módon létrehozzuk a térkép objektumot, ezt már mutattam az első példában:
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("terkep"), myOptions);
A Hello World példához képest, mindössze ennyivel egészítjük ki a JavaScript részt:
google.maps.event.addListener(map, 'bounds_changed', function() {
var zoom = map.getZoom();
var center = map.getCenter();
document.getElementById("zoom").innerHTML = zoom;
document.getElementById("lat").innerHTML = center.lat();
document.getElementById("lng").innerHTML = center.lng();
});
A google.maps.event.addListener függvénnyel tudunk feliratkozni egy eseményre. Első paramétere az a térkép objektum, aminek az eseményére fel akarunk iratkozni. A második az esemény neve, az utolsó paraméter pedig a függvényünk, amit meg fog hívni az API, amikor bekövetkezik az esemény.
A függvény tartalma nagyon egyszerű, a map objektum getZoom() és getCenter() függvényeivel kiolvassuk az aktuális középpontot és a zoom értékét, majd egyszerű JavaScripttel kiírjuk a megfelelő span tag-be.
Ezek után a kapcsolódó HTML már nem okozhat meglepetést, mindössze ennyi:
<div id="terkep"></div>
<p>
Zoom: <span id="zoom"></span><br />
Center Lat: <span id="lat"></span><br />
Center Lng: <span id="lng"></span>
</p>
Demó
Működés közben itt lehet megnézni a dolgot:
http://edgarpe.hu/sites/default/files/gmaps-api-2-esemenyek.html
A demó forrásába érdemes lehet belenézni, bár szinte semmi mást nem tartalmaz a fentieken kívül.
Megjegyzések
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.
Legközelebb megmutatom a Markerek használatát (információs pontok a térképen). És továbbra is várom a tippeket, hogy milyen példák legyenek még.
Remélem hasznos volt, jöhetnek a kérdések:
Az egész azzal indult, hogy az Index 
