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

Google Maps API

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:

Google Maps API használata – 1. Helló Google Térkép!

Google Maps API

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 :)