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

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

5 hozzászólás

Tetszett, köszi. Engem az

Tetszett, köszi.
Engem az érdekelne, hogy hogyan lehet cím szerint helyet megadni, és hogyan lehet információs pontokat a térképre tenni.
Hab a tortán az útvonaltervezés: meg lehet azt határozni, hogy ha megadok két pontot, és az egyiktől elindulva megyek 20 kilométert, akkor pontosan hol vagyok?
De bármi érdekel a témában, köszi előre is!

Szia! A cím szerinti hely

Szia! A cím szerinti hely meghatározásról (GeoCode) és az információs pontokról (Marker) mindenképpen írok majd, ezt amúgy is terveztem.