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

> A Google Maps API-kulcs elkészítése a Google Cloudban, mentése a bővítményben, és a böngészőkonzol Google-hibáinak megszüntetése a Google Map API kapcsolóval.

A [Google Térkép widget](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-terkep-attekintes/) **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:

```text
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.”

![A Google Térkép szürke, a Google hibaüzenetével: az oldal nem tudja megfelelően betölteni a Google Térképet](./kepek/kepek-media-terkep-google-kulcs-hiba.webp)

*A Google Térkép szürke, a Google hibaüzenetével: 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.