# Google Térkép widget és API-kulcs

> Google Térkép beágyazása az oldalra: az API-kulcs létrehozása a Google Cloud Console-ban, megadása az Elementorban, a widget beállításai és a rámutatási hatás.

A **Google Térkép** widget egyszerű módja annak, hogy Google-térképet ágyazz be az oldalra. Kapcsolat oldalon különösen hasznos, hogy a látogatók lássák, hol találnak meg.

## Mire jó?

- Egy új étterem nyitóoldalán a térkép segít az új vendégeknek odatalálni.
- Utazási iroda térképen mutatja az útvonalakat.
- Ingatlanközvetítő az eladó házak helyét jelöli.
- Szállodalánc az egyes szállodák helyét mutatja.

## A widget használata előtt: Google API-kulcs

A widgethez Google API-kulcs kell. Ehhez Google-fiók, egy projekt számlázási fiókkal, és az engedélyezett Maps Embed API szükséges.

### A kulcs megszerzése a Google Cloud Console-ban

1. A Google Cloud Platformon hozz létre egy új projektet. Adj neki egyedi nevet (a projekt neve később nem módosítható), add meg a szervezet nevét és a projekt helyét.
2. A bal oldali menüben nyisd meg a **Billing** (számlázás) oldalt, és állítsd be a számlázási adatokat. Az első lépésben válaszd ki az országot, fogadd el a felhasználási feltételeket, és kattints a folytatásra. A másodikban válaszd ki a fiók típusát, add meg a cég nevét, a fizetési módot és annak adatait (például bankkártya), majd indítsd el az ingyenes próbaidőszakot. Ezzel a projekt számlázási adatai rendben vannak.
3. Az **APIs and Services → Credentials** oldalon kattints a **+ Create Credentials** hivatkozásra, és válaszd az **API key** lehetőséget. Megkapod a kulcsot. A saját védelmedben érdemes korlátozni, hogy máshol ne lehessen használni.
4. Az **APIs and Services** felületen nyisd meg a **Library** oldalt, keress rá a „Maps” szóra, és válaszd ki a **Maps Embed API**-t, mert az Elementor widgetnek erre van szüksége. Engedélyezd. Az API ezután megjelenik az elérhető API-k listájában, és adatot kezd gyűjteni.

### A kulcs megadása az Elementorban

1. A WordPress admin felületén nyisd meg az **Elementor → Beállítások** oldalt.
2. Kattints az **Integrációk** fülre.
3. A **Google Maps beágyazási API** mezőbe másold be az API-kulcsot.
4. Kattints a **Változtatások mentése** gombra. Ezután használhatod a widgetet.

![Az Elementor beállításai, Integrációk fül](./kepek/globalis-beallitasok-beallitasok-integraciok.webp)

*Az Elementor beállításai, Integrációk fül* (https://minta-bolt.hu/wp-admin/admin.php?page=elementor-settings)

A képen az **Integrációk** fül látszik a Google Maps API-kulcs mezőjével. A fül többi beállításáról lásd: [Az Elementor beállításai](https://hub.hellowp.io/hu/plugins/elementor/globalis-beallitasok-elementor-beallitasok/).

## Térkép beszúrása lépésről lépésre

1. Húzd a **Google Térkép** widgetet a vászonra. A beállításai a bal oldali panelen jelennek meg. A widget hozzáadásáról lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).
2. A panelen add meg a **Helyszín** mezőben azt a helyet, amelyet a térképen meg akarsz jeleníteni.
3. A csúszkával állítsd be a térkép magasságát.

Ha szeretnéd, hogy a térkép megjelenése változzon, amikor a látogató fölé viszi az egeret:

1. Kattints a **Stílus** fülre.
2. A **Normál** állapotnál kattints a **CSS-szűrők** melletti ceruza ikonra, és a csúszkával csökkentsd a **Kontrasztot** 60-ra.
3. Kattints a **Rámutatás** fülre, ott is a ceruza ikonra, és emeld a **Kontrasztot** 120-ra. A térkép így „kiemelkedik”, ha a látogatók fölé viszik az egeret.

![A Google Térkép widget Tartalom füle: Helyszín, Zoom, Magasság](./kepek/widgetek-google-terkep-tartalom.webp)

*A Google Térkép widget Tartalom füle: Helyszín, Zoom, Magasság* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen a **Helyszín** mező, a **Zoom** és a **Magasság** csúszkája látszik. A panel tetején a figyelmeztetés arra emlékeztet, hogy az API-kulcsot az **Integrációs beállítások** oldalon kell megadni.

![A Google Térkép widget Stílus füle: Normál és Rámutatás, CSS-szűrők](./kepek/widgetek-google-terkep-stilus.webp)

*A Google Térkép widget Stílus füle: Normál és Rámutatás, CSS-szűrők* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen a **Normál** és a **Rámutatás** állapot, alattuk a **CSS-szűrők** látszik.

## A widget beállításai

### Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| **Helyszín** | A hely, amelyre a térkép középre áll. Bármi megadható, amit a Google Térkép azonosítani tud |
| **Zoom** | Csúszkával szabályozza, mennyire közelítsen rá a térkép a területre |
| **Magasság** | A térkép magassága csúszkával |

### Stílus fül

| Beállítás | Mit csinál |
|---|---|
| **Normál** és **Rámutatás** | Hogyan jelenjen meg a térkép alapból, és hogyan, ha a látogató fölé viszi az egeret |
| **CSS-szűrők** | Csúszkák: **Elmosás** (lágy fókusz), **Fényerő**, **Kontraszt**, **Telítettség** és **Árnyalat** (a színek elforgatása a színkörön). Lásd: [Keverési módok és szűrők](https://hub.hellowp.io/hu/plugins/elementor/stilus-keveresi-modok-es-szurok/) |
| **Átmenet időtartama** | Rámutatási hatás esetén azt adja meg, mennyi idő alatt jelenik meg a hatás |

### Haladó fül

A **Haladó** fülön a widget helyét, linkjeit és egyedi kódját állíthatod. Lásd: [Haladó fül](https://hub.hellowp.io/hu/plugins/elementor/stilus-halado-ful/).

## Az eredmény az oldalon

![Az oldalon a beágyazott térkép a Deák Ferenc tér környékével](./kepek/widgetek-cim-es-terkep-elol.webp)

*Az oldalon a beágyazott térkép a Deák Ferenc tér környékével* (https://minta-bolt.hu/widget-demo-3/)

A képen a beágyazott térkép látszik a cím alatt.