# Google Térkép widget: beállítások, több jelölő, egyedi jelölő és szövegfedvény

> A Google Térkép widget két térképtípusa (Google és OpenStreetMap), a helyszínek és jelölők felvétele, saját jelölőképek, vonal a pontok között és a térkép fölé tett szövegblokk.

A **Google Térkép** widget interaktív térképet tesz az Elementor-oldalra, helyszínenként egy jelölővel, saját jelölőképekkel és a térkép fölé tehető szövegblokkal.

Kétféleképpen tudja megrajzolni a térképet. A **Google Térkép** típus a Google Maps JavaScript API-t használja, és Google Maps API-kulcsot kér. Az **Open Street Map (OSM)** típus OpenStreetMap-csempéket használ a Leaflet könyvtáron át, kulcs és fiók nélkül.

A widget a Pro bővítmény része.

## Mielőtt elkezdesz

- A kapcsoló a **The Plus Addons → Widgets** oldalon van (keresd a **Google Map** nevet az **Essential** csoportban). A Pro bővítmény nélkül a widget zárolt Pro widgetként látszik az Elementor panelen, és nem húzható az oldalra.
- A **Google Térkép** típus csak akkor rajzol, ha mentve van egy Google Maps API-kulcs. Lásd a [Google Térkép: API-kulcs és konzolhibák](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-terkep-api-kulcs/) fejezetet.
- Az **Open Street Map (OSM)** típushoz semmi sem kell.

## A widget hozzáadása

1. A **The Plus Addons → Widgets** oldalon keresd meg és kapcsold be a **Google Map** widgetet.
2. Szerkeszd az oldalt Elementorral, keresd meg a **Google Térkép** widgetet, és húzd a vászonra.
3. Az **Elrendezés** szakaszban válaszd ki a **Térképtípus** értékét: **Google Térkép** vagy **Open Street Map (OSM)**. A panel többi része ettől függ.

![A Google Térkép widget Elrendezés szakasza a Térképtípus listával](./kepek/kepek-media-terkep-panel-elrendezes.webp)

*A Google Térkép widget Elrendezés szakasza a Térképtípus listával* (https://minta-bolt.hu/wp-admin/post.php?post=218&action=elementor)

A két típus beállításai nem közösek. A típus váltásakor a panel szakaszai kicserélődnek; a másik típushoz beírt értékek megmaradnak, csak rejtve vannak.

## A panel szakaszai

| Szakasz | Mikor látszik | Mit tartalmaz |
|---|---|---|
| **Elrendezés** | mindig | **Térképtípus** |
| **Tartalom** | Google Térkép | **Több helyszín hozzáadása** és **Minimális magasság** |
| **Térkép stílusa** | Google Térkép | nagyítás, térképvezérlők, térképváltozat és az egyéni színek |
| **Térképfedvény** | Google Térkép | a térkép fölé rajzolt cím és leírás |
| **Extra opciók** | Google Térkép | három kapcsoló a jelölők szövegbuborékjához és a WP Search Filter-kapcsolathoz |
| **Tartalom forrása** | OSM | **Alapértelmezett nézet** és **Helyszínpont hozzáadása** |
| **OSM-térkép beállítása** | OSM | magasság, nagyítás, vezérlők és csemperéteg |
| **Stílus** fül: OSM-vonal | OSM | **Vonal színe** a pontokat összekötő vonalhoz |

## Google Térkép típus

### Tartalom: a helyszínek

A **Több helyszín hozzáadása** lista minden sora egy jelölő. Egy sorban ezek vannak: **Szélességi fok értéke**, **Hosszúsági fok értéke**, **Cím szövege az eszköztipphez**, **Jelölő ikonja** és **Képfelbontás**.

![A Tartalom szakasz három helyszínsorral és a Minimális magasság csúszkával](./kepek/kepek-media-terkep-panel-tartalom.webp)

*A Tartalom szakasz három helyszínsorral és a Minimális magasság csúszkával* (https://minta-bolt.hu/wp-admin/post.php?post=218&action=elementor)

A **Minimális magasság** a térképterület magasságát adja eszközönként, alapértéke 400 px, a csúszka 100 és 1000 között mozog.

### Több jelölő felvétele

1. Jelöld ki a widgetet, és nyisd meg a **Tartalom → Több helyszín hozzáadása** listát.
2. Nyisd ki az első sort, és töltsd ki a **Szélességi fok értéke**, **Hosszúsági fok értéke** és **Cím szövege az eszköztipphez** mezőt. A cím szövege jelenik meg, amikor a látogató a jelölőre kattint. A mező formázott szöveget fogad el, például félkövért és sortörést.
3. Kattints az **Elem hozzáadása** gombra, és ismételd meg minden további helyszínnel.
4. Nyisd meg a **Térkép stílusa → Térképnagyítás** csúszkát, és húzd vissza addig, amíg minden jelölő belefér a képbe. Az érték 1 (az egész világ) és 25 (egyetlen utca) között mozog, alapértéke 15, ami annyira közeli, hogy a távoli jelölők kiesnek a képből.

Sorok számának nincs felső korlátja.

### Egyedi jelölő a Google Térképen

Minden sornak saját jelölője lehet, a jelölő nélküli sor a térkép alapértelmezett tűjét használja, így egy térképen keverhető a kettő.

1. Nyisd ki a módosítandó helyszínsort a **Több helyszín hozzáadása** listában.
2. A **Jelölő ikonja** mezőben tölts fel vagy válassz egy képet.
3. A **Képfelbontás** **Teljes** értéke az eredeti fájlt használja, a többi érték a WordPress képméretei közül választ, az **Egyéni** pedig megjelenít egy **Kép mérete** mezőt, ahová szélességet és magasságot írhatsz képpontban. A Google Térkép jelölőjét az **Egyéni** felbontás méretezi át.
4. Ismételd meg minden sorban, ahol más jelölőt szeretnél.

Nincs külön rámutatási vagy aktív jelölő: helyszínenként egy kép látszik mindig.

### Térkép stílusa

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Térképnagyítás** | Mennyire közel indul a térkép, 1 (az egész világ) és 25 között. | 15 |
| **Térképbeállítások** | Mely Google-vezérlőket kapja a látogató: **Egérgörgő**, **Térképmozgató vezérlő**, **Húzható**, **Nagyításvezérlő**, **Térképtípus-vezérlő**, **Méretarányjelző**, **Teljes képernyős vezérlő**, **Street View-vezérlő**, **Jelölőcsoportosítás**. | mind, a **Jelölőcsoportosítás** kivételével |
| **Google Maps-térképtípusok** | A térkép megjelenése: `ROADMAP`, `HYBRID`, `SATELLITE` vagy `TERRAIN`. | `ROADMAP` |
| **Egyéni térképstílusok** | Bekapcsolja az alatta megjelenő színbeállításokat. | Elrejtés |

![A Térkép stílusa szakasz: nagyítás, térképbeállítások, térképtípusok és egyéni stílusok](./kepek/kepek-media-terkep-panel-stilus.webp)

*A Térkép stílusa szakasz: nagyítás, térképbeállítások, térképtípusok és egyéni stílusok* (https://minta-bolt.hu/wp-admin/post.php?post=218&action=elementor)

A **Jelölőcsoportosítás** az egymáshoz közel álló jelölőket egy csoportba vonja össze, és az egyetlen kapcsoló a **Térképbeállítások** között, amely alapból ki van kapcsolva.

Az **Egyéni térképstílusok** bekapcsolása után hét kész színséma közül választhatsz, vagy a saját színárnyalat-, telítettség- és világosságértékeiddel felülírhatod a sémát.

### Térképfedvény: szöveg a térkép fölött

A térkép fölé kis szövegblokk tehető (cím, nyitvatartás, parkolási tudnivaló), a látogató pedig egy kapcsolóval összehajthatja.

1. Jelöld ki a Google Térkép widgetet, és a **Térképtípus** legyen **Google Térkép**.
2. Nyisd meg a **Térképfedvény** szakaszt, és kapcsold be a **Tartalom a térkép fölött** kapcsolót.
3. Írd be a címet a **Cím** mezőbe, a szöveget a **Leírás** mezőbe.
4. A blokk megjelenését a **Háttér típusa**, a **Cím tipográfiája**, a **Cím színe**, a **Leírás tipográfiája** és a **Leírás színe** állítja.
5. Az összehajtó kapcsoló színét a **Kapcsológomb színe** és az **Aktív kapcsoló színe** adja.

![A Térképfedvény szakasz: kapcsoló, cím, leírás és a stílusbeállítások](./kepek/kepek-media-terkep-panel-atfedes.webp)

*A Térképfedvény szakasz: kapcsoló, cím, leírás és a stílusbeállítások* (https://minta-bolt.hu/wp-admin/post.php?post=218&action=elementor)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Tartalom a térkép fölött** | Megjeleníti vagy elrejti az egész blokkot. | Elrejtés |
| **Cím** | A blokk fejlécsora. | „Location Here” |
| **Leírás** | A blokk szövege. A beírt HTML megmarad. | helyőrző szöveg |
| **Cím színe**, **Leírás színe** | A szövegek színe. | `#fff` |
| **Kapcsológomb színe** | Az összehajtó vezérlő nyugalmi színe. | `rgba(0, 0, 0, 0.4)` |
| **Aktív kapcsoló színe** | A vezérlő színe kattintás után. | `#81d742` |

- A fedvény nyitva indul, a látogató a kapcsolóra kattintva hajtja össze, és újra rákattintva hozza vissza.
- A **Leírás** HTML-jét a WordPress a bejegyzésekben engedélyezett címkék (`<strong>`, `<br>`, `<a>`) szerint tartja meg; a szkriptcímkék és hasonlók kiesnek.
- A cím és a leírás külön tipográfiát és színt kap.
- Az alapszínek fehérek, ezért világos térképváltozaton a szöveg addig nem olvasható, amíg hátteret nem adsz, vagy át nem színezed a szöveget.
- Widgetenként egy fedvény van, rögzített helyen; nincs beállítás arra, hogy a térkép melyik részére kerüljön.
- A kapcsolónak nincs felirata, apró jelzés nélküli vezérlő, ezért a látogatónak magának kell rájönnie.
- A **Térképfedvény** csak a **Google Térkép** típuson van meg; az **Open Street Map (OSM)** típuson nincs.

### Extra opciók

![Az Extra opciók szakasz három kapcsolója](./kepek/kepek-media-terkep-panel-extra.webp)

*Az Extra opciók szakasz három kapcsolója* (https://minta-bolt.hu/wp-admin/post.php?post=218&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **A WP Search Filter felülbírálása** | Összekapcsolja a térképet egy ugyanazon az oldalon lévő WP Search Filter widgettel. Emellett a térkép minden jelölőnél meghívja a Google Geocoding API-ját, ezért a kulcsnál ezt az API-t is engedélyezni kell. |
| **Cím elrejtése** | Elhagyja a böngészők által a jelölőn mutatott eszköztippet. |
| **Tartalom rámutatáskor** | A címbuborékot rámutatásra nyitja, nem kattintásra. |

## Open Street Map (OSM) típus

Az **Open Street Map (OSM)** típusnál a térkép OpenStreetMap-csempékből áll: nincs kulcs, fiók és számlázás. Minden OSM-térkép jobb alsó sarkában megmarad a „Leaflet | © OpenStreetMap contributors” hivatkozás.

### Tartalom forrása

Az **Alapértelmezett nézet** adja meg, hol nyíljon a térkép: szélességi és hosszúsági fok vesszővel elválasztva (alapérték: `28.6076, 77.2254`). A **Helyszínpont hozzáadása** lista minden sora egy pont.

![A Tartalom forrása szakasz: alapértelmezett nézet és a Győr pont kinyitva](./kepek/kepek-media-terkep-panel-osm-pont.webp)

*A Tartalom forrása szakasz: alapértelmezett nézet és a Győr pont kinyitva* (https://minta-bolt.hu/wp-admin/post.php?post=219&action=elementor)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Rétegpont típusa** | Mit rajzol: **Jelölő**, **Kör** vagy **GeoJSON**. | **Jelölő** |
| **Felugró ablak típusa** | **Súgóbuborék**: az üzenet rámutatásra jelenik meg; **Felugró ablak**: kattintásra; **Nincs**: semmi. | **Súgóbuborék** |
| **Pont neve** | A pont címkéje a térképen lévő rétegek dobozában. | üres |
| **Szélesség és hosszúság** | A pont helye, vesszővel elválasztva. | `23.0225, 72.5714` |
| **Felugró üzenet** | A súgóbuborék vagy a felugró ablak szövege. | „New York City” |
| **Alapértelmezetten bekapcsolva** | Kirajzolódik-e a pont az oldal megnyitásakor. Kikapcsolva is szerepel a rétegek dobozában, onnan a látogató bekapcsolhatja. | Megjelenítés |
| **Vonalrajzolás bekapcsolása** | Összeköti ezt a pontot minden olyan ponttal, amelynek ugyanaz a **Kapcsolat ID-ja**. | alap |
| **OSM egyéni kép** | Saját jelölőkép és az **Ikon mérete (szélesség, magasság)**. | alap |
| **GeoJSON-kód** | GeoJSON-alakzat, ha a **Rétegpont típusa** **GeoJSON**. A súgóbuborék szövegét az alakzat saját `properties.name` értéke adja. | üres |

A **Kör** pontnak nincs szín- vagy sugárbeállítása: a Leaflet alapértelmezett kék színével, rögzített méretben jelenik meg.

### Több pont egy OSM-térképen

1. Állítsd az **Elrendezés → Térképtípus** értékét **Open Street Map (OSM)** értékre.
2. A **Tartalom forrása → Alapértelmezett nézet** mezőbe írd be azt a szélességi és hosszúsági fokot, ahol a térkép megnyíljon, vesszővel elválasztva. Válassz valamit a pontjaid közepéről.
3. Nyisd meg a **Helyszínpont hozzáadása** listát, töltsd ki az első pont **Pont neve**, **Szélesség és hosszúság** és **Felugró üzenet** mezőjét, majd vegyél fel egy sort minden további ponthoz.
4. Az **OSM-térkép beállítása → Nagyítási szint** értékét állítsd úgy, hogy minden pont beleférjen. Az érték 1 és 20 között mozog (alapérték 2: az egész világ, a példaoldalon 7).

![Az OSM-térkép beállítása: térkép magassága, nagyítási szint, vezérlők és csemperéteg](./kepek/kepek-media-terkep-panel-osm-beallitas.webp)

*Az OSM-térkép beállítása: térkép magassága, nagyítási szint, vezérlők és csemperéteg* (https://minta-bolt.hu/wp-admin/post.php?post=219&action=elementor)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Térkép magassága** | A térképterület magassága eszközönként, 0 és 1000 px között. | 400 |
| **Nagyítási szint** | 1 (az egész világ) és 20 (utcaszint) között. | 2 |
| **OSM-térkép vezérlői** | Mely vezérlőket kapja a látogató: összecsukott rétegdoboz, dupla kattintásos nagyítás, térkép húzása, nagyítás görgetőkerékkel, méretarányjelző, nagyításvezérlő. | **Térkép húzása**, **Nagyítás görgetőkerékkel**, **Nagyításvezérlő** |
| **Összecsukott gomb** | A rétegek doboza kis ikonként indul-e. Csak akkor szerkeszthető, ha az **OSM-térkép vezérlői** között ott az összecsukott rétegdoboz. | Megjelenítés |
| **Alapértelmezett csemperéteg** | Az URL, ahonnan a térkép csempéi jönnek. | `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png` |

![Három jelölő az OpenStreetMap-térképen, vonallal összekötve, a rétegek dobozával](./kepek/kepek-media-terkep-osm.webp)

*Három jelölő az OpenStreetMap-térképen, vonallal összekötve, a rétegek dobozával* (https://minta-bolt.hu/km6-terkep-osm/)

A képen a jobb felső sarokban a rétegek doboza látszik: négy alaptérkép (OSM, OSM.de, OSM.ch, OSM.Fr), alattuk minden pont a **Pont neve** szerint, jelölőnégyzettel. A látogató ezzel egyenként kapcsolja ki és be a pontokat. A név nélküli pont is megjelenik, generált címkével.

### Pontok összekötése vonallal

1. Nyisd ki az egyik pontot, és kattints a **Vonalrajzolás bekapcsolása** mellett a szerkesztés ikonra.
2. Kapcsold be a **Felugró ablak megjelenítése vonalrajzoláskor** kapcsolót, és adj a pontnak **Kapcsolat ID-t**, például `utvonal`.
3. Ismételd meg minden olyan ponton, amelynek ugyanazon a vonalon kell lennie, ugyanazzal a **Kapcsolat ID-val**. A vonal a pontok listabeli sorrendjét követi.
4. A színt a **Stílus** fülön az **OSM-vonal** blokk **Vonal színe** mezője adja.

![Az OSM-vonal stílusblokkja a Vonal színe mezővel](./kepek/kepek-media-terkep-panel-osm-stilus.webp)

*Az OSM-vonal stílusblokkja a Vonal színe mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=219&action=elementor)

- Egy **Kapcsolat ID** egy vonalat jelent: az azonos azonosítójú pontokat a rendszer a lista sorrendjében köti össze, ezért a sorok átrendezése megváltoztatja a vonal alakját.
- A vonalnak a teljes térképre egyetlen színe van, mert a **Vonal színe** widgetszintű beállítás, két külön útvonalat ugyanazon a térképen nem lehet más színűre festeni.
- Ha egy pont egyedül kap azonosítót, nem rajzolódik vonal.

### Egyedi jelölő az OSM-térképen

1. Nyisd meg a **Tartalom forrása → Helyszínpont hozzáadása** listát, és kattints arra a pontra, amelyet módosítani szeretnél.
2. Az **OSM egyéni kép** mellett kattints a szerkesztés ikonra, kapcsold be az **Egyéni kép bekapcsolása** kapcsolót, és a **Kép kiválasztása** mezőben válaszd ki a képet.
3. Az **Ikon mérete (szélesség, magasság)** mezőbe két számot írj vesszővel elválasztva, például `44, 55`. Az alapérték `18, 24`.
4. A **Felugró ablak/súgóbuborék (bal, fent)** mezővel arrébb tolhatod a buborékot a jelölőtől, ha rosszul áll.

Az **Ikon mérete** minden sorra érvényes, akkor is, ha a kép maga nem jelenik meg.

Fontos eltérés: a kipróbált oldalon az **első egyéni képes pont** a gyári jelölőt kapta, a méretet azonban megkapta, a második és a harmadik pont viszont a kiválasztott képet. Ha a jelölőnek egy ponton rendben kell lennie, tegyél elé olyan pontot, amelyen nem számít a jelölő, vagy egy kikapcsolt (**Alapértelmezetten bekapcsolva** ki) pontot.

### Mit érdemes még tudni az OSM-ről

- Az OSM mindig ad rétegdobozt a jobb felső sarokban.
- A súgóbuborék és a felugró ablak különböző műveletek: a súgóbuborék rámutatásra, a felugró ablak kattintásra jelenik meg.
- Ha a **Felugró ablak típusa** **Súgóbuborék** vagy **Nincs**, a jelölő húzható, a látogató elhúzhatja a tűt a helyéről. A **Felugró ablak** érték rögzíti a jelölőt.
- Címkereső nincs: minden ponthoz be kell írni a koordinátákat.

## Hibaelhárítás

### A térképterület üres az oldalon

Ellenőrizd a **Térképtípus** értékét. A **Google Térkép** típus kulcs nélkül csak a Google hibaüzenetét mutatja, lásd a [Google Térkép: API-kulcs és konzolhibák](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-terkep-api-kulcs/) fejezetet. Kulcs nélkül is működő térképhez válts **Open Street Map (OSM)** típusra.

### Csak néhány jelölő látszik

Túl közel van a nagyítás. Csökkentsd a **Térképnagyítás** értékét a Google Térképen, vagy a **Nagyítási szintet** az OSM-en, amíg minden jelölő bele nem fér.

### Az OSM-térkép egészen máshol nyílik meg

Az OSM-en az **Alapértelmezett nézet** dönt a nyitóhelyről, nem a pontok. Állíts be egy szélességi és hosszúsági fokot a pontjaid közepén.

### Nem jelenik meg a vonal

Minden vonalon lévő pontnál be kell kapcsolni a **Felugró ablak megjelenítése vonalrajzoláskor** kapcsolót, és ugyanaz kell legyen a **Kapcsolat ID-ja**.

### Az OSM-jelölő még mindig az alap kék tű

Nézd meg, hogy nem az első egyéni képes pont-e, az megtartja a gyári jelölőt. Ellenőrizd azt is, hogy az **OSM egyéni kép** felugró paneljében be van-e kapcsolva az **Egyéni kép bekapcsolása**, nem elég csak a képet kiválasztani.

### A jelölő túl nagy vagy túl kicsi

Google Térképen állítsd a **Képfelbontás** értékét **Egyéni**-re, és írd be a kívánt méretet. OSM-en az **Ikon mérete (szélesség, magasság)** mezőt módosítsd.

### Nem találom a Térképfedvény szakaszt

A **Térképfedvény** rejtett, amíg a **Térképtípus** **Open Street Map (OSM)**.

### A fedvény szövege láthatatlan

A **Cím színe** és a **Leírás színe** alapból fehér. Adj a blokknak hátteret a **Háttér típusa** alatt, vagy állíts sötétebb színt.

### A konzolban Google-figyelmeztetés van, pedig csak OSM-et használok

A bővítmény minden oldalra beteszi a Google térképszkriptjét, amíg a **Google Map** widget be van kapcsolva a **The Plus Addons → Widgets** oldalon, akkor is, ha a widget az **Open Street Map (OSM)** típusra van állítva. Ezt a [Google Térkép: API-kulcs és konzolhibák](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-terkep-api-kulcs/) fejezet írja le.