Google Maps API használata – 2. Események

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:

5 hozzászólás

Hello! Ezeknél az

Beküldte Anonymous -

Hello!
Ezeknél az eseményeknél van arra lehetőség, hogy return false, vagy valami hasonló megoldással a mozgatást korlátozzuk? Nekem sehogy sem sikerült. :(

Nem tudok róla, de utána

Beküldte EdgarPE -

Nem tudok róla, de utána fogok nézni mert ez engem is érdekel.

Helló! Engem az érdekelne,

Beküldte Anonymous -

Helló!

Engem az érdekelne, hogy meg lehet-e oldani azt hogy mondjuk csak Magyarország térkép legyen?

Üdv
Dani