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 “Google Platform Console” feliratra.

API-kulcs beszerzése 1. lépés

Ezután be kell jelentkezned a Google fiókodba.

A továbblépéshez 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.

API-kulcs beszerzése 2. lépés

Valószínűleg 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.

A “Create“-re kattintva tudod létrehozni az új projektedet.

Ezután csempés elosztásban tudsz választani a lehetőségek közül, hogy mihez szeretnél API kulcsot készíteni. Keresd meg a “Maps JavaScript” lehetőséget és válaszd ki.

API-kulcs csempés megjelenítés

A következő ablakban ezt jóvá kell hagyni az “Enable”-re kattintva.

Bal oldalon a menüsávban az “APIs”-ra kattintva többet is hozzá tudsz adni. Adogasd hozzá ezeket (sajnos csak egyesével lehet):

  • Places API
  • Geocoding API
  • Geolocation API
API engedélyezések hozzáadása

Ezután a bal oldali hamburger menüre kattintva előjön az “APIs&Services” menüpont, amit tovább lenyitva kattints a “Credentials” (“Hitelesítés”) almenüpontra.

Credentials almenüpont

A középen látható “Create credentials” lenyíló gombon belül válaszd az “API key” lehetőséget és kattints rá.

API-kulcs elkészítése

Ha ezután betöltött az oldal, 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

API-kulcs beillesztése Divibe

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. 🙂

Egy másik lehetőség: Google térkép beállítása API kulcs nélkül

Végül pedig mutatok egy másik módszert, amivel az API kulcs nélkül is be tudod ágyazni a Google térképet.

Első lépésként keresd meg a kiválasztott címet a Google térképen, jelöld meg, ezután pedig kattints a megjelenő térképadatok jobb alsó sarkában található “Megosztás” gombra.

API-kulcs nélkül 1. lépés

Ezután kattints a felugró ablakban a “Térkép beágyazása” opcióra. Itt látni is fogod a kódrészletedet, amit majd be kell ágyaznod a sablonodban. Kattints a “HTML másolása” gombra. Így a kódrészlet vágólapra került.

Beágyazás

Beágyazott kód hozzáadása a Divihez

Építsd fel a Diviben a megálmodott oldal elrendezést, szúrj be egy “Kód” elnevezésű elemet, majd illeszd be “ctrl+v”-vel a kódrészletet a tartalom részbe.

Kódrészlet beillesztése

Ha ezzel kész vagy, látni is fogod a térképet az oldaladon. Alap esetben 600X450 pixeles méretben fog megjelenni a térkép, de teljes szélességben is meg tudod jeleníteni.

Ebben az esetben kezdésként hozz létre egy egyszerű szakaszt, adj hozzá egy egyoszlopos sort, majd a beállításainál állítsd át a sort teljes szélességűre. A “Tervezés” fülön belül a “Szélesség” és “Max. Szélesség” értékeit is 100%-ra kell állítanod (az utóbbi alapból pixelben lesz megadva, de ezzel ne törődj, csak írd át “100%”-ra az értéket).

Teljes szélességű sor

Ha ezzel megvagy, a kódban a szélesség értékét írd át 100%-ra (width=”100%”). Máris látni fogod, hogy az oldal teljes szélességében megjelent a térképed.

Szerintem ez a megoldás kicsit könnyebb, mint az API kulccsal bajlódni, de válaszd azt, amelyik neked jobban bejön.


A Google Térkép működésre bírása összességében tényleg nem egy 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: ha eddig nem tetted, állítsd be most 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.

A feliratkozással elfogadom az adatvédelmi tájékoztatót.

Ne maradj le a Black Friday-ról!

Az év legnagyobb leárazás a Divinél!