# Címkereső a Térkép mezőben

> Címjavaslatok a Térkép mezőben: a kiválasztott cím helye megjelenik a térképen.

A címkereső nem csak különálló szövegmezőként használható. A JetFormBuilder **Térkép** (Map Field) mezőjébe is beépíthető: a látogató begépeli a címet, kiválaszt egyet a legfeljebb öt javaslatból, és a térkép megmutatja a helyét.

## Követelmények

- A JetFormBuilder és a JetEngine bővítmény bekapcsolva. A **Térkép** mező a JetEngine térképes funkciójára épül.
- A JetEngine **Térképes listák** moduljának bekapcsolva: **JetEngine → JetEngine → Modulok**. Ha nincs bekapcsolva, a szerkesztőben a mező helyén egy figyelmeztetés áll: a Térkép mező a JetEngine bővítményt és a térképes listák funkciót is igényli.

![A JetEngine Modulok fül a bekapcsolt Térképes listák modullal](./kepek/cimmezo-terkep-jetengine-modulok.webp)

*A JetEngine Modulok fül a bekapcsolt Térképes listák modullal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine)

A képen a **Térképes listák** kapcsolója be van kapcsolva.
- Telepített és bekapcsolt Address Autocomplete kiegészítő.
- Google API-kulcs (a Google térképszolgáltatónál kell, Leaflet vagy Mapbox esetén nem).

## A folyamat áttekintése

1. Telepítsd és kapcsold be a kiegészítőt.
2. Válaszd ki a térképszolgáltatót.
3. Szerezz API-kulcsot (Google esetén).
4. Állítsd be a JetEngine térképes beállításait.
5. Állítsd be a JetFormBuilder beállításait.
6. Készítsd el az űrlapot.
7. Tedd az űrlapot egy oldalra, és próbáld ki.

## A térképszolgáltató kiválasztása

1. Nyisd meg a **JetEngine → JetEngine** oldalt, és válaszd a **Térképek beállításai** fület.
2. A **Térképszolgáltató** listából válaszd ki a **Google Maps**, a **Leaflet Maps** vagy a **Mapbox** szolgáltatót.

![A JetEngine Térképek beállításai fül a térképszolgáltatóval és az API-kulccsal](./kepek/cimmezo-terkep-jetengine-terkep-beallitasok.webp)

*A JetEngine Térképek beállításai fül a térképszolgáltatóval és az API-kulccsal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine)

A képen a **Térképszolgáltató**, az **API-kulcs** és a **Geokódolási szolgáltató** beállítása látszik.

A **Google Maps** az alapértelmezett, ehhez Google API-kulcs kell. A **Leaflet Maps** és a **Mapbox** választásakor a kulcsra nincs szükség.

## A Google API-kulcs megszerzése

1. Nyisd meg a Google Cloud Console-t.
2. Görgess le az **APIs & Services** részhez, és kattints rá.
3. Megnyílik a **Credentials** lap. Ha korábban már készítettél kulcsot, az **API Keys** szakaszban látod.
4. Kattints a kulcs nevére, hogy megnyissa a részleteit.
5. Új kulcsot a **Create credentials** gombbal készíthetsz: válaszd az **API key** lehetőséget, és állítsd be a korlátozásait.
6. A korlátozások beállítása után kattints a **Show key** gombra, és másold ki a kulcsot.

A kulcs létrehozásának lépései a Google Cloud felületén vannak, ezért ott a Google saját feliratait látod.

## A JetEngine beállításai

1. Térj vissza a **JetEngine → JetEngine → Térképek beállításai** fülre.
2. Illeszd be a kimásolt kulcsot az **API-kulcs** mezőbe.
3. A **Geokódolási szolgáltató** mezőben válaszd ki, melyik szolgáltatótól kérje a térkép a koordinátákat a címek alapján: **Google**, **Open Street Map**, **Photon** vagy **Bing**. A beállítás az összes térképes listára érvényes.
4. Kattints a **Validate Google maps API key** gombra: ez egy próbakérést küld, és ellenőrzi, hogy a kulcshoz be van-e állítva a Geocoding API. Siker esetén a gomb mellett egy üzenet jelzi, hogy a kulccsal sikerült koordinátákat lekérni egy véletlenszerű címhez, tehát használható címek geokódolására.

A mezők kitöltése után az adatok maguktól elmentődnek.

## A JetFormBuilder beállításai

1. Nyisd meg a **JetFormBuilder → Settings → Address Autocomplete API** fület.
2. Illeszd be ugyanazt a kulcsot a **Google Places API key** mezőbe.
3. Kattints a **Save** gombra.

A fülről részletesebben a [Google API-kulcs és beállítás](https://hub.hellowp.io/hu/plugins/jet-form-builder-address-autocomplete/google-api-kulcs/) fejezetben olvasol.

## Az űrlap elkészítése

1. Nyisd meg a **JetFormBuilder → Add New Form** oldalt, és adj címet az űrlapnak.
2. Az alapértelmezett **Welcome** blokkon a **Start from scratch** gombbal indulhatsz üres űrlapról.
3. Add hozzá az **Address Autocomplete Field** mezőt, add meg a **FIELD LABEL** és a **FORM FIELD NAME** értékét, és válaszd ki a kívánt **PLACE TYPES** típust.
4. Add hozzá a **Térkép** (Map Field) mezőt.
5. Jelöld ki a Térkép mezőt, és nyisd meg a **Blokk** fület. A **Map Settings** szakaszban kapcsold be a **Show search autocomplete** kapcsolót.
6. Szükség esetén állítsd be a **HEIGHT** csúszkát.
7. Mentsd az űrlapot.

![Az űrlap szerkesztője a kijelölt Térkép mezővel és a Map Settings szakasszal](./kepek/cimmezo-terkep-szerkeszto.webp)

*Az űrlap szerkesztője a kijelölt Térkép mezővel és a Map Settings szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=edit)

A képen a **Map Settings** szakaszban a bekapcsolt **Show search autocomplete** kapcsolót és a **HEIGHT** értékét látod.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Show search autocomplete** | Kereső mezőt ad a térképhez: az öt javasolt cím közül kiválaszthatod a keresettet, és a kiválasztott hely megjelenik a térképen. | kikapcsolva |
| **HEIGHT** | A térkép magassága pixelben, 50 és 1000 közötti értékkel. A **Visszaállít** gomb 300 pixelre állítja. | 300 |

Az űrlap beküldésekor a rendszer alapértelmezés szerint elmenti az űrlap adatait (**Save Form Record** művelet), így a címet a **JetFormBuilder → Form Records** oldalon látod. Ha a címet egyéni bejegyzéstípusba szeretnéd menteni, add hozzá az **Insert/Update Post** beküldés utáni műveletet.

## Az űrlap kihelyezése

Az űrlapot oldalra, önálló bejegyzés sablonjába vagy archívum sablonba is beteheted a **JetForm** widgettel, blokkal vagy elemmel. A kihelyezés lépéseit az [Az eredmény a weboldalon](https://hub.hellowp.io/hu/plugins/jet-form-builder-address-autocomplete/eredmeny/) fejezet írja le.

## Kipróbálás a weboldalon

1. Nyisd meg az oldalt a weboldalon, és töltsd ki az űrlapot.
2. Gépeld be a cím első három karakterét.
3. A Térkép mező keresőmezője legfeljebb öt javaslatot ad a legördülő listában.
4. Válaszd ki a keresett címet: a térkép megmutatja a helyét.
5. Küldd be az űrlapot. A beküldött adat megjelenik a **JetFormBuilder → Form Records** oldalon.

## Hibaelhárítás

- Ha a szerkesztőben a Térkép mező helyén angol figyelmeztetés áll, kapcsold be a JetEngine **Térképes listák** modulját a **JetEngine → JetEngine → Modulok** fülön.
- Ha nincs javaslat, ellenőrizd a Google API-kulcsot mindkét helyen (**JetEngine** térképes beállításai és **JetFormBuilder → Settings → Address Autocomplete API**), és hogy a kulcshoz engedélyezve van-e a Geocoding API.