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

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.

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.

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 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.

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 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.