# Haladó térkép és Google Maps API-kulcs

> A Google Maps API-kulcs létrehozása, a térképszolgáltatók beállítása, és a Haladó térkép widget használata.

A **Haladó térkép** (Advanced Map) widget térképet tesz az oldalra. Alapértelmezésben a Google Maps szolgáltatást használja, amelyhez saját API-kulcs kell. A kulcs egy azonosító: megmondja a Google-nek, melyik projekt kéri a térképet.

## Követelmények

- Elementor és JetElements.
- Egy Google-fiók, a Google Cloud Console-ban létrehozott projekt és API-kulcs. A Google a regisztrációnál számlázási adatokat és bankkártyát kér.

## A Google Maps API-kulcs létrehozása

1. Nyisd meg a Google Cloud Console-t, és kattints a **Get started for free** gombra.
2. Az 1. lépésben (**Step 1 of 2**) válaszd ki a Google-fiókodat és az országodat, majd kattints az **Agree & continue** gombra.
3. A 2. lépés a számlázási oldal: töltsd ki az összes kötelező mezőt (az irányítószámot is), a **Payment method** részben add meg a kártyaadataidat, és kattints a **Start free** gombra.
4. Válaszolj a rövid kérdőív két kérdésére, majd kattints a **Next** gombra.
5. A keresőbe írd be: „Google Maps Platform”.
6. Az API-kulcs elkészül. Másold ki, és kattints a **Go to Google Maps Platform** gombra.
7. Nyisd meg az **APIs & Services** részt, keresd meg a **Geocoding API** szolgáltatást, és győződj meg róla, hogy be van kapcsolva.
8. Ugyanígy kapcsold be a **Maps JavaScript API** szolgáltatást is.

## A kulcs megadása a bővítményben

1. Nyisd meg a **Crocoblock → JetPlugins Settings** oldalt, a **JetElements** csoportot, azon belül az **Integrations** aloldalt.
2. A **Google Maps** blokkban illeszd be a kulcsot a **Google Map API-kulcs** mezőbe.

![A JetElements integrációs beállításai a Google Maps blokkal](./kepek/integraciok.webp)

*A JetElements integrációs beállításai a Google Maps blokkal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-dashboard-settings-page&subpage=jet-elements-integrations-settings)

A kép tetején a **Google Maps** blokk látszik: a **Map Provider**, a kulcs mezője, a JS-fájl letiltásának kapcsolója, a **Geocoding Provider** és a külön geokódoló kulcs kapcsolója.

További beállítások ugyanebben a blokkban:

| Beállítás | Mit csinál |
| --- | --- |
| **Map Provider** | A térképszolgáltató: **Google Maps**, **Leaflet** vagy **Mapbox** |
| **A Google Maps API JS fájl letiltása** | Kapcsold be, ha a Google Maps JS-fájlt már betölti egy másik bővítmény vagy a sablon |
| **Geocoding Provider** | A címeket koordinátává alakító szolgáltatás: **Google**, **OpenStreetMap**, **Photon** vagy **Bing** |
| **Separate Geocoding API key** | Bekapcsolva külön kulcsot adhatsz meg a geokódoláshoz, így pontosabban korlátozhatod a kulcs használatát |

## A Haladó térkép widget az oldalon

1. Nyisd meg az oldalt az Elementorral, és húzd a **Haladó térkép** widgetet a kívánt helyre.
2. A **Tartalom** fül **Térkép beállításai** blokkjában válaszd ki a **Térkép középpontjának típusa** értékét, és add meg a **Térkép középpontjának címe** mezőben a címet. Az alapérték a London Eye.
3. Állítsd be a többi beállítást, és szabd testre az oldalt.
4. Kattints a **Közzététel** gombra.

![A Haladó térkép widget Térkép beállításai blokkja](./kepek/integraciok-terkep-beallitasok.webp)

*A Haladó térkép widget Térkép beállításai blokkja* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A panel tetején a kulcs beállítására mutató megjegyzés van; alatta a középpont típusa és címe, a kezdeti nagyítás és a vezérlők.

| Beállítás | Mit csinál |
| --- | --- |
| **Térkép középpontjának típusa** | **Koordináták**, **Cím** vagy **DMS Format of Coordinates** |
| **Térkép középpontjának címe** | A térkép középpontja (cím megadásakor) |
| **Kezdeti nagyítás** | A térkép kezdeti nagyítási szintje (alapérték: 11) |
| **Nagyítás az egér görgőjével** | Az egérgörgővel nagyíthat-e a látogató (alapból **Letiltva**) |
| **Nagyítási vezérlők** | A nagyítógombok megjelenítése vagy elrejtése |
| **Teljes képernyős vezérlő** | A teljes képernyős gomb megjelenítése vagy elrejtése |
| **Street View-vezérlők** | A Street View gomb megjelenítése vagy elrejtése |
| **Térképtípus-vezérlők (Térkép/Műhold)** | A térkép és a műhold nézet közti váltó |
| **Mozgatható a térkép?** | A látogató húzással mozgathatja-e a térképet (alapból **Igen**) |

A widgetnek további blokkjai is vannak: **Térkép stílusa** és **Jelölők**.

## Az eredmény ellenőrzése

Nyisd meg a kész oldalt a nyilvános felületen: a térkép a megadott címet mutatja középpontként.