Uj verzio !!!

Eleg gyakran hasznalom a Google Maps API-t es csinaltam hozza egy ugynevezett ‘wrapper’ fuggvenycsomagot ami megkonnyiti az API egyszerubb funkcioinak hasznalatat. Ennek hasznalataval nincs ma dolgunk mint egy konfiguracios valtozonak(ami JSON object) megadni az ertekeket es meghivni a fuggvenyt.

Lassunk tehat egy egyszeru peldat. Az API mukodesehez szuksegunk lesz egy API kodr, amit itt lehet igenyelni : http://code.google.com/apis/maps/signup.html . Semmi mas nem kell hozza csak egy
regisztralt Google fiok(email, stb). Miutan megvan API key-unk, alabbi sorokkal(a noscript tagok nelkul) betoltjuk az API fajljat az oldalunkra:

<noscript>
&lt;mce:script mce_src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=A_KAPOTT_API_KEY_JON_IDE"             type="text/javascript"&gt;&lt;/mce:script&gt;
</noscript>

Ezutan definialjuk a konfiguracios valtozot:

<span style="text-decoration: line-through;">var opt = {
map : {'id':'mymap','centerAddress':'budapest,hungary','zoom':12},
markers : [
    {'icon':'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png','address':'1081,hungary'},
    {'icon':null,'address':'1013,hungary'}
    ],
infoWindows: [
    {'content':'Lorem ipsum dolor sit amet','address':'1081,hungary','markerId':'0','event':'click'},
    {'content':'Lorem ipsum dolor sit amet','address':'1013,hungary','markerId':null,'event':null}
    ]
}
</span>

Ehhez egy kis magyarazat. Eloszor a map tulajdonsagait adjuk meg. az elso az id, ami annak a html elemnek az id-ja kell hogy legyen amibe a terkepunket szeretnenk rakni,a masodik a terkepkozeppontjanak a cime, a harmadik pedig a terkep zoom-erteke. Itt tobb mindent is meg lehetne adni, de az a kovetkezo verziora var.

Ket dolgot kezel a fuggveny: a markereket es az infoWindow-okat. A marker a kis jelzo valami a terkepen, amivel megtudunk pontokat jelolni. Ennek ket tuljadonsagot adhatunk meg, az ikon-jat es a cimet ahova mutasson. Ha az alapertemezett google icont szeretnenk hasznalni akkor az icon-nak null erteket kell adnunk, a cim az pedig egyertelmuen a cim. Ennel a resznel fontos megjegyezni, hogy a hibakezelest azt teljesen kihagytam ezert ha a cim hibas es nem jon vissza a helyes geocode akkor a kod megall. Amint lesz idom, a hibakezelest is hozzairom.

Az info window a terkep barmly pontjahoz(altalaban markerekhez) kapcsolt informacios ablak. Ez akar a terkep betoltesenel is mejelenhet, de tetszoleges esemenyekhez(click,mouseover,stb) is kapcsolhatjuk. A konfig elso reszeben az ablak tartalamat adhatjuk meg, a masodikban a cimet,a harmadik a marker azonositoja, ha markerhez szeretnenk kapcsolni(ha eventet hasznalunk akkor ez kotelezo,ha nem akkor lehet null). Ez az azonosito a marker tomb index-e. Tehat az elso markere nulla es egyesevel novekszik. Es vegul az eventet adhatjuk meg ami ha null akkor a betoltodeskor latszik.

Miutan megvagyunk a konfuguracioval toltsok be a wrapper js-t es hijuk meg az body onload evenjere a kodot:

<span style="text-decoration: line-through;"><script src="gmaps2Wrapper.js" type="text/javascript"><!--mce:0--></script></span>

A fajl-t letolthetitek innen :

Az kodot a google playground-on is kiprobalhatjatok, ami itt talaltok Playground. Ide nem kell api key.

Cimkék: google, google api, google maps, google maps api, Javascript