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.
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.
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.
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
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.
A középen látható “Create credentials” lenyíló gombon belül válaszd az “API key” lehetőséget és kattints rá.
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“
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“
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.
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á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.
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).
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!
A következő bejegyzés Google Térkép beillesztése API-kulcs segítségével (vagy anélkül) WordPress weboldalba elsőnek ezen a webcímen jelent meg: WPKurzus | WordPress tanfolyam.
Nincsenek megjegyzések:
Megjegyzés küldése