A Google Térkép a legjobb eszköz, ha szeretnéd valamilyen konkrét földrajzi hely címét megjeleníteni a WordPress alapú weboldaladon.

Mivel látványos eleme lehet az egyébként nem túlságosan izgalmas “Kapcsolat” vagy “Elérhetőségek” oldalaknak, ma már “alapnak” számít a weboldalba ágyazott Google Térkép használata, így te is biztosan sok helyen találkoztál már vele.

Rövid idő alatt annyira népszerűvé vált a Google-térképrészletek megjelenítése, hogy a Google szigorított egy picit az egyébként ingyenes eszközük hozzáférésén, és bevezették, hogy csak egy hitelesítési folyamatot követően használhatod ezt a szolgáltatásukat.

Igaz, hogy átlagos felhasználóként így plusz egy kört kell futnod, mire ezt a beállítást is megcsinálod, de lássuk be, a szigorítás jogos: a Google szerverei folyamatos terhelésnek vannak kitéve a sok-sok adatlekérdezés miatt, amit ők ingyen biztosítanak a számunkra.

Ha első ránézésre azt sem tudod, mi az az API-kulcs, és eszik-e vagy isszák, akkor sem kell aggódnod.

Gyorsan és fájdalommentesen túlesel az egészen, ha elolvasod ezt a bejegyzésünket. 🙂

A Google Térkép API-kulcsának megszerzése

Az API-kulcs használatával azt tudod megmutatni a Google-nek, hogy te tényleg egy igazi projekten dolgozol.

Ezáltal természetesen ők is kapnak információt a honlapodon lévő történésekről, de mivel cserébe ingyen nyújtanak neked egy hasznos szolgáltatást, nincs mese, ezt el kell fogadni.

Ezen az oldalon tudod megszerezni a kulcsodat. Az oldal felülete sajnos angolul van, de ez ne rettentsen el, egyértelmű lesz, hogy mit is kell csinálnod.

Elsőnek kattints a “Get a key” gombra.

google-térkép-api-get-a-key

Fel fog ugrani egy ablak, ahol a Google felkér rá, hogy hozz létre egy új projektet, vagy válassz egyet a már korábban létrehozottak közül.

Természetesen egy új projektet kell létrehoznod. Igazából teljesen mindegy, mit írsz be a projekt címének, a legegyszerűbb megoldás az, ha beírod a weboldalad nevét. Ez semmire sem lesz hatással a későbbiekben.

google-térkép-projekt

A “+ Create a new project“-re kattintva tudod létrehozni az új projektedet.

Ha beírtad a címét, akkor kattints az “Enable API“-ra. El fog kezdeni tölteni, várd meg, amíg végigmegy.

google-térkép-projekt-kész

Ha betöltött, akkor elkezdhetsz örülni – ennyi volt, meg is kaptad az API-kulcsodat!

Az sok egymás után következő betű és szám lesz az, amit a “Your API key” mezőbe kaptál. Ezt a kódot kell majd bemásolnod a WordPress-en belül a megfelelő helyre.

Google API-kulcs bemásolása a WordPress honlapodba

Elsőnek is ki kell másolnod a kulcsot, amit a Google honlapján kaptál. Kattints a “Your API key” mező jobb oldalon lévő ikonra, ami két egymást fedő papírlapot formáz, vagy jelöld ki a kódot és nyomj egy “Ctrl+C” billentyűkombinációt.

Megjegyzés: Ha időközben véletlenül a “Finish”-re kattintottál, akkor klikkelj ismét a “Get a key”-re, és válaszd ki az előbb létrehozott projektedet. Ugyanúgy meg fogod kapni a kulcsot, mivel a rendszer azt már elmentette. Ráadásul bármennyi új projektet is létrehozhatsz, ha másik weboldalon kell majd megadnod egy API-kulcsot.

A jobb sablonok készítői már figyelnek arra, hogy egyszerűen be tudd másolni ezt a kódot a sablonodba. Most megmutatom, hogy a Divibe és az Avadába hova kell bemásolnod. Ez a jelenleg elérhető két legjobb sablon, így a kód beillesztése is gyerekjáték. 🙂

Divi

A Divi sablonban nagyon könnyen el tudod érni azt a mezőt, ahova be kell másolni a kódot.

A következő útvonalat kell követned:

Bal oldali menüsávban “Divi” >> “Sablon beállítások” >> “General/Általános” >> “Google API kulcs

google-térkép-divi

A legegyszerűbb a “Ctrl+V” billentyűkombinációval bemásolni a kódot. Ha esetleg még nem másoltad le, akkor menj vissza a kulcshoz a Google oldalára, és tedd meg.

Ezután ne felejtsd el elmenteni a beállítást a “Változtatások mentése” gombbal a lap alján.

Avada

Az Avadánál egy kicsit el van dugva ez a beállítás, de még szerencse, hogy én segítek megtalálni. 😉

Ezen az útvonalon haladj a baloldali menüsávban: “Avada” >> “Theme Options” >> “Contact Form” >> “Google Maps API Key

google-térkép-avada

Kattints bele az egyelőre üres mezőbe, majd a “Ctrl+V” billentyűkombinációval illeszd be ide a Google oldalán korábban már lemásolt kódot. Ha esetleg nem történne semmi, térj vissza az API-kulcs oldalára, jelöld ki újból a kódot és másold le megint (hátha valamiért elsőre félresikerült volna a másolás).

Ha ez megvan, a “Save Changes“-re kattintva tudod elmenteni a változtatásokat.

 

Ezután már nincs más dolgod, mint berakni az oldaladra a Maps/Térkép elemet az Avada vagy a Divi segítségével, attól függően, hogy melyiket használod. A további beállításokat ehhez már a kurzusainkban mutatom meg, szóval ha jelenleg pont erre lenne szükséged, az egy újabb jó érv a csatlakozás mellett. 🙂

A Google Térkép működésre bírása tényleg nem egy nagyon bonyolult beállítás, viszont kezdőként nem szokott teljesen egyértelmű lenni, így azért meg tudja tréfálni az embert.

Ezzel a cikkel azonban megválaszoltam a kezdeti kérdéseket, úgyhogy most már ideje cselekedned: állítsd be te is a Google Térképet a saját weboldaladon!

Tanuld meg ingyenesen a WordPress alapjait!

7 napos online oktatóvideós tanfolyam, ami segít elindulni a saját WordPress utadon.