Google Térkép: API-kulcs készítése és a konzolhibák megszüntetése

A Google Térkép widget Google Térkép típusa a Google saját térképszkriptjét tölti be, azt pedig a Google csak érvényes API-kulccsal szolgálja ki. Kulcs nélkül a térkép elszürkül, és „For development purposes only” felirat kerül rá.

Kulcsot úgy szerzel, hogy a Google Cloud konzolon projektet hozol létre, számlázást kapcsolsz rá, és a kulcsot bemásolod a bővítmény beállításai közé. Ha mindezt nem szeretnéd, állítsd a widget Térképtípus értékét Open Street Map (OSM) típusra: ahhoz nem kell kulcs és fiók.

A widget a Pro bővítmény része.

Mielőtt elkezdesz

• Szükséged van egy Google-fiókra és fizetési módra. A Google számlázási képernyője kimondja, hogy a Google Maps Platformhoz fizetős számlázási fiók tartozik, és a havi ingyenes keret feletti használatot arra terheli.
• A widget a Maps JavaScript API-t tölti be, ezt kell engedélyezni.
• A Google Map widgetnek be kell lennie kapcsolva a The Plus Addons → Widgets oldalon.

Mit kér a widget a Google-tól

A bővítmény minden olyan oldalra beteszi ezt a szkriptet, amelyen a widget van, a kulcsoddal a végén:

https://maps.googleapis.com/maps/api/js?key=<a kulcsod>&libraries=places&sensor=false

A kulcshoz tehát a Maps JavaScript API-nak engedélyezve kell lennie. Ha az Extra opciók → A WP Search Filter felülbírálása kapcsolót is bekapcsolod, a widget a Google Geocoding API-ját is meghívja, és azt is engedélyezni kell.

A kulcs létrehozása a Google Cloudban

Ezek a lépések a Google oldalán, a Google Cloud konzolon történnek. A Google időnként átalakítja a konzolt, ezért a lépések útmutatásnak tekintendők, nem pontos képernyőleírásnak.

1. Hozz létre egy projektet: adj neki nevet, válassz helyet, és kattints a CREATE gombra.
2. Állíts be számlázást a projekthez: a Google országot, a feltételek elfogadását, majd egy fizetési móddal rendelkező számlázási fiókot kér.
3. Kösd a számlázási fiókot a projekthez.
4. A Google ezután megmutatja a létrehozott kulcsot. Másold ki, és tartsd biztonságos helyen.
5. Korlátozd a kulcsot arra, amire szükséged van: az API-korlátozásnál pipáld be a Maps JavaScript API-t, és a Geocoding API-t is, ha használni fogod a WP Search Filter beállítást. Az engedélyezett API-kat a projekt API-oldalán ellenőrizheted.

A leggyakoribb ok, amiért a térkép beállítás után is üres marad, hogy a kulcsot rossz API-ra korlátozták. A widget a Maps JavaScript API-t tölti be, a kulcsnak azt kell engedélyeznie.

A kulcs mentése a bővítményben

1. A WordPressben nyisd meg a The Plus Addons → Settings oldalt, és görgess az API blokkhoz.
2. Keresd meg a Google Map API kártyát, és bizonyosodj meg róla, hogy a kapcsolója be van kapcsolva.
3. Kattints a kártyán a fogaskerék ikonra. Megnyílik a Google Map API ablak.
4. Illeszd be a kulcsot a Map API Key mezőbe, és kattints a Save gombra.

A kulcs a teljes webhelyre egyetlen beállítás: oldalanként vagy widgetenként nem adhatsz meg másikat. A kulcs egyszerű szövegként tárolódik a WordPress beállítástáblájában, ezért a tényleges védelmet a Google oldalán a korlátozás adja.

Hogyan látod, hogy működik

Nyiss meg egy oldalt a Google Térkép widgettel az Elementor szerkesztőben vagy a megjelent oldalon. Amíg a Google nem fogadja el a kulcsot, a térkép elszürkülve jelenik meg, „For development purposes only” felirattal és a Google saját üzenetével: „Ez az oldal nem tudja megfelelően betölteni a Google Térképet.”

https://minta-bolt.hu/km6-terkep-google/

Az üzenet és a szürke árnyék a Google-tól jön, nem a bővítménytől: így jelzi a Google, hogy a kulcsot nem fogadja el. Érvényes kulcs mellett a felirat eltűnik, és a térkép színesen, a jelölőkkel jelenik meg.

A konzol Google-hibái: ha kétszer töltődik be a Google-szkript

Ha a böngészőkonzol megtelik Google Maps-hibákkal azokon az oldalakon, ahol a Google Térkép widget van, általában az a ok, hogy a Google térképszkriptje kétszer töltődik be ugyanarra az oldalra. A bővítmény saját súgója ezt így mondja: kapcsold ki a kulcsot, ha a sablonod már kezeli a Google-kulcsot, így nem keletkezik hiba a konzolon több Google-térképkulcs miatt.

A Google Map API kapcsoló ezért van: kikapcsolva a bővítmény nem teszi be a saját szkriptpéldányát, és csak az marad, amelyet a sablonod vagy egy másik bővítmény már betölt.

A bővítmény Google-szkriptjének kikapcsolása

1. Először nézd meg, ki tölti még be. Nyisd meg az oldal forrását, és keresd a maps.googleapis.com szöveget. Ha többször szerepel, ez a fejezet neked szól; ha egyszer, a hiba más.
2. Nyisd meg a The Plus Addons → Settings oldalt, az API blokkot, és a Google Map API kártyát.
3. Kapcsold ki a kapcsolót. A fogaskerék ikon vele együtt szürkévé válik, mert a Map API Key mező ehhez a kapcsolóhoz tartozik.
4. Töltsd újra a hibát mutató oldalt, és nézd meg újra a konzolt.

A Google Map API kapcsoló	Mi van az oldalon
Be	A bővítmény betölti a maps.googleapis.com/maps/api/js szkriptet a mentett kulccsal.
Ki	A bővítmény nem tesz be semmit. A Google-térképszkript, ha van, a sablonodból vagy másik bővítményből jön.

• A kapcsoló az egész webhelyre érvényes, nem oldalanként vagy widgetenként.
• A kulcs mezője ugyanahhoz a kapcsolóhoz tartozik. Kikapcsolva a Map API Key nem érhető el, de a kulcs megmarad, visszakapcsolva visszatér.
• A szkript az Open Street Map típus mellett is betöltődik: amíg a Google Map widget be van kapcsolva a The Plus Addons → Widgets oldalon, a bővítmény akkor is beteszi a Google szkriptjét, ha a widget Open Street Map (OSM) típusra van állítva. Ha csak OSM-térképeket használsz, a kapcsoló kikapcsolása veszteség nélkül eltávolítja a szkriptet és a konzolfigyelmeztetéseket.
• A kikapcsolástól nem jelenik meg térkép: a bővítmény szkriptjét távolítja el. A Google Térképnek csak akkor van mivel futnia, ha a sablonod vagy egy másik bővítmény betölti a Google térképszkriptjét.
• Oldalankénti vezérlés nincs: ha az egyik oldalnak kell a bővítmény szkriptje, a másiknak nem, a kapcsoló nem tesz különbséget.

Konzolüzenetek kulcs nélkül

Konzolüzenet	Mit jelent
NoApiKeys	A szkript üres kulccsal töltődött be. Mentsd el a kulcsot, vagy kapcsold ki a Google Map API kapcsolót.
InvalidKey	A Google elutasította a küldött kulcsot. Ellenőrizd a Google oldalán.
ApiProjectMapError	A Google a kulcshoz tartozó projektet nem fogadta el. Ilyenkor a térkép a képen látható szürke, hibaüzenetes formában jelenik meg. Ellenőrizd a Google oldalán a projektet, a számlázást és azt, hogy a kulcs engedélyezi-e a Maps JavaScript API-t.

Hibaelhárítás

A szerkesztő még mindig azt írja, hogy az oldal nem tudja betölteni a Google Térképet

Vagy nem mentetted a kulcsot, vagy a Google elutasítja. Nyisd meg újra a The Plus Addons → Settings → Google Map API ablakot, és ellenőrizd, hogy a kulcs a Map API Key mezőben van. Ezután nézd meg a Google oldalán, hogy a projekthez be van-e állítva számlázás, és a kulcs engedélyezi-e a Maps JavaScript API-t.

Nem akarok számlázást beállítani

Állítsd a Térképtípus értékét Open Street Map (OSM) típusra. OpenStreetMap-csempékről rajzol, nem kér kulcsot, a beállításai a Tartalom forrása és az OSM-térkép beállítása szakaszban vannak.

A konzolban még mindig vannak hibák a kikapcsolás után

Ürítsd az oldal gyorsítótárát, és töltsd újra az oldalt. Ha megmaradnak, a második szkriptpéldány nem a The Plus Addonsból jön: nézd meg a sablonod beállításait és a többi bővítményedet.

Csak OSM-et használok, mégis Google-figyelmeztetést látok

Ez várható: a bővítmény a Google-szkriptet akkor is betölti, ha a Google Map widget be van kapcsolva, bármelyik térképtípusra van állítva. Kapcsold ki a Google Map API kapcsolót, vagy a The Plus Addons → Widgets oldalon magát a widgetet, ha egyáltalán nem használod.