Gmaps Wrapper 0.2
Használat közben észrevettem, hogy ha több címet adok meg(5-10), akkor néhány esetben nem jön meg a geocode válasz és ezért nem rakja ki a markereket a script. Ezt javítottam, és kicsit egyszerűsítettem a kódot. Az új verzióhoz más konfig változót kell megadni.
Elég gyakran használom a Google Maps API-t és csináltam hozzá egy úgynevezett ‘wrapper’ függvénycsomagot ami megkönnyíti az API egyszerűbb funkcióinak használatát. Ennek használatával nincs más dolgunk mint egy konfigurációs változónak(ami egy JSON objektum) megadni az értékeket és meghívni a függvényt.
Lássunk tehát egy egyszerű példát. Az API működéséhez szükségünk lesz egy API kódra, amit itt lehet igényelni : api key. Semmi más nem kell hozzá csak egy regisztrált Google fiók(email, stb). Miután megvan az API key-ünk, az alábbi sorokkal(a noscript tagok nélkül) betöltjük az API fájlt az oldalunkra:
<noscript> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=API_key" type="text/javascript"</script> <script src="gmapsWrapper2.min.js" type="text/javascript"</script> </noscript>
Ezután definiáljuk a konfigurációs változót:
var opt = { map : {"id":"map","centerAddress":"1140,Budapest,Hungary","zoom":10}, markers : [ {"icon":null,"address":"1041,Budapest,Hungary", "infoWindow":"Ujpest","event":"click"}, {"icon":null,"address":"1140,Budapest,Hungary","infoWindow":"Zuglo","event":"click"}, {"icon":null,"address":"1150,Budapest,Hungary","infoWindow":"1150","event":"click"}, {"icon":null,"address":"1180,Budapest,Hungary","infoWindow":"1180","event":"click"}, {"icon":null,"address":"1071,Budapest,Hungary","infoWindow":"7","event":"click"}, ] }
Ehhez egy kis magyarázat. Először a map tulajdonságait adjuk meg. Az első az id, ami annak a html elemnek az id-ja kell hogy legyen amibe a térképünket szeretnénk rakni,a második a térképközéppontjának a címe, a harmadik pedig a térkép zoom értéke. Itt több mindent is meg lehetne adni, de az a következő verzióra vár.
Két dolgot kezel a függvény: a markereket és az infoWindow-okat. A marker a kis jelző valami a térképen, amivel megtudunk pontokat jelölni. Ennek három tulajdonságot adhatunk meg, az ikon-ját és a címet ahová mutasson, és ha infowindow-t szeretnénk hozzárendelni. Ha az alapértemezett google icont szeretnénk használni akkor az icon-nak null értéket kell adnunk, a cím az pedig egyértelműen a cím. Ennél a résznél fontos megjegyezni, hogy a hibakezelést azt teljesen kihagytam ezért ha a cím hibás és nem jön vissza a helyes geocode akkor a kód végtelen ciklust generál és a böngésző lefagyhat. Amint lesz időm, a hibakezelést is hozzáírom.Az info window tartalamát az infoWindow paraméterrel adhatjuk meg(ha nem akarunk infowindow-t akkor null értéket írjunk bele), és végül az event-et adhatjuk meg.
Miután megvagyunk a konfigurációval be kell tötenünk a wrapper js-t és hívjuk meg a body onload event-jére a kódot:
<script src="gmaps2Wrapper0.2.js" type="text/javascript"></script> <body onload="initialize()">
A fájl-t letölthetitek innen : gmapswrapper
A google playground-on is kipróbálhatjátok, amit itt találtok Playground. Ide nem kell api key.
Egy demót pedig itt láthattok: demo
Cimkék: google, google api, google maps