# Google Maps API-kulcs beállítása

> Hogyan hozol létre Google Maps API-kulcsot, hogyan adod meg a Bricks-ben, és hogyan korlátozod a jogosulatlan használat ellen.

A **Térkép (Google)** elemmel könnyű Google-térképet tenni az oldalra. A legnagyobb akadály az API-kulcs létrehozása. Ez a fejezet megmutatja, hogyan készítsd el, és hogyan korlátozd a használatát API- és alkalmazáskorlátozással.

## Előfeltételek

A Maps JavaScript API használatához a Google Cloudban kell egy projekt számlázási fiókkal, és be kell kapcsolnod a **Maps JavaScript API**-t és a **Geocoding API**-t. A pontos, aktuális követelményeket a Google dokumentációjában találod.

Ha a beállítás kész, a kulcsot a Google Cloud **Kulcsok és hitelesítő adatok → API-kulcsok** részén találod.

## A kulcs megadása a Bricks-ben

1. Másold ki a kulcsot a Google Cloudból.
2. Nyisd meg a **Bricks → Beállítások → API-kulcsok** lapot.
3. Illeszd be a **Google Maps: API key** mezőbe.
4. Mentsd a beállításokat.

![Az API-kulcsok lap Google Maps: API key mezője](./kepek/integraciok-api-kulcsok.webp)

*Az API-kulcsok lap Google Maps: API key mezője* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A képen a középső mező a Google Maps kulcsé, alatta a kulcs megszerzését leíró súgólinkkel.

Ezután a **Térkép (Google)** elemet bármelyik oldalon használhatod. Az elem beállításait a [Térkép (Google) elem](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-terkep-google/) fejezet írja le. Ha a térkép nem jelenik meg rendesen, nézd meg a böngésző fejlesztői konzolját.

## API- és alkalmazáskorlátozások

A Google Cloudban korlátozhatod, hogy a kulcsot hol és mely API-khoz lehessen használni. Ez véd a jogosulatlan használattól.

### Alkalmazáskorlátozás

Mivel webhelyről van szó, az alkalmazáskorlátozás legyen **Websites** (weboldalak), és a **Add** gombbal add hozzá a webhelyed címét. A Google Cloud például ezeket a címformákat fogadja el:

- egy domain összes URL-je aldomain nélkül: `https://example.com`
- egy konkrét aldomain összes URL-je: `https://sub.example.com`
- egy domain összes aldomainje, csillaggal (`*`): `https://*.example.com`
- egy domain és az összes aldomainje: `https://example.com` és `https://*.example.com`

### API-korlátozás

1. Válaszd a **Restrict key** (kulcs korlátozása) lehetőséget.
2. Jelöld ki a **Select APIs** opciót.
3. Engedélyezd a **Maps JavaScript API**-t és a **Geocoding API**-t.
4. Mentsd a kulcs beállításait.

## Gyakori problémák

Ha a térkép nem látszik, nyisd meg a böngésző fejlesztői konzolját: ott a hiba oka és a megoldás is megjelenik. A leggyakoribb okok:

- nincs számlázási fiók hozzárendelve a projekthez,
- a szükséges API-k nincsenek bekapcsolva,
- a korlátozások hibásak (például nem a webhelyed címe szerepel).