# Dinamikus Google Maps widget

> A Dinamikus Google Maps widget adattípusai, többhelyes lekérdezése, térképtípusa, jelölői, információs ablaka és vezérlői.

A **Dinamikus Google Maps** widget interaktív térképet jelenít meg egy vagy több ponttal. A működéséhez [Google Maps API-kulcs](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/terkepek-google-maps-api-kulcs/) kell.

![A Dinamikus Google Maps widget beállításai](./kepek/terkepek-google-maps-beallitasok.webp)

*A Dinamikus Google Maps widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

A panel szakaszai: **Dinamikus Google Maps**, **Vezérlés**, **Térképtípus**, **Információs ablak**, **Jelölő**, **Vezérlők** és **Forrás**. Az első szakaszban az **Adattípus** választja ki, honnan jön a pont.

## Adattípusok

| Adattípus | Mit kell megadnod |
| --- | --- |
| Cím | Egy cím szövegesen. Az alapérték „Venice, Italy”. |
| Szélesség és hosszúság | A koordináták tizedes fokban. |
| ACF Google Map mező | Az ACF térképmező neve. Az aktuális bejegyzés értékét használja; sablonban a sablont használó bejegyzés értéke jelenik meg, így a térkép bejegyzésenként változik. |
| Meta Box Google Map mező | A Meta Box térképmezője. |

Az ACF és a Meta Box adattípushoz a megfelelő bővítménynek aktívnak kell lennie. ACF nélkül a widget jelzi, hogy ehhez az Advanced Custom Fields kell.

## Több hely egy térképen (lekérdezés)

ACF vagy Meta Box adattípusnál bekapcsolhatod a több helyszín megjelenítését. Ekkor egy lekérdezés adja meg, mely bejegyzések térképmezőjét gyűjtse össze a widget.

A **Lekérdezés típusa** lehet:

- **Egyedi bejegyzéstípus**: kiválasztod azt a bejegyzéstípust, amelyen a térképmező van, és kifejezések (taxonomy) szerint tovább szűrheted.
- **Dinamikus aktuális lekérdezés**: az aktuális oldal lekérdezését használja, például egy archívumoldalon.
- **Search & Filter Pro**: a Search & Filter bővítmény (2. vagy 3. verzió) lekérdezését veszi át.
- **Megadott bejegyzésekből**: kézzel választod ki a bejegyzéseket.
- **ACF Relationship**: egy ACF kapcsolatmező bejegyzéseit használja.
- **ACF Repeater**: ismétlődő mező almezői adják a pontokat. Ehhez előbb az **Adattípus** alatt a repeater Google Map almezőjét kell kiválasztanod.

### Példa: üzletek térképe

1. Hozz létre egy egyedi bejegyzéstípust, például „Üzletek”. Ha szeretnéd, kifejezésekkel (kategóriákkal) csoportosíthatod a bejegyzéseket.
2. Hozz létre egy **Google Map** típusú ACF mezőt, és rendeld az Üzletek bejegyzéstípushoz.
3. Vedd fel az üzleteket, mindegyiknél add meg a helyet.
4. Készíts egy oldalt, amely az üzleteket mutatja, tedd rá a Google Maps widgetet, és kapcsold be a **Lekérdezés** használatát. A kifejezés (taxonomy) beállításával szűkítheted az eredményt.

### Példa: repeater almezővel

1. Hozz létre egy ACF repeater mezőt, amelynek van egy Google Map típusú almezője.
2. A widgetben az **Adattípus** legyen ACF térképmező, válaszd ki a repeater almezőjét, és kapcsold be a több helyszínt.
3. A megjelenő lekérdezés-szakaszban a **Lekérdezés típusa** legyen **Repeater**, majd válaszd ki a repeater mezőt.
4. Az információs ablak elemeihez (kép, cím, tartalom, „Tovább” hivatkozás egy másik bejegyzésre) is hozzárendelhetsz repeater-almezőket.

## Vezérlés

![A Vezérlés szakasz](./kepek/terkepek-google-maps-vezerles.webp)

*A Vezérlés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Helymeghatározás | A böngésző HTML5 helymeghatározásával megmutatja a látogató földrajzi helyét a térképen. | Nem |
| Nagyítási szint | A térkép kezdeti nagyítása. | 10 |
| Minimális és maximális nagyítási szint beállítása | Korlátozza, mennyire lehet kinagyítani vagy kicsinyíteni a térképet. | Nem |
| Görgetés | Az oldal görgetésekor a térkép ne nagyítson akaratlanul. Ezzel szabályozhatod, hogy az egérgörgő a térképet nagyítsa-e. | Igen |

## Térképtípus

![A Térképtípus szakasz](./kepek/terkepek-google-maps-terkeptipus.webp)

*A Térképtípus szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

A **Térképtípus** a térkép megjelenését adja meg: **Térkép**, **Műhold**, **Hibrid** vagy **Domborzat**.

Az **Új Google Maps API használata** kapcsoló (alapból be van kapcsolva) a Google vektoros térképmotorját (MapID) használja: simább mozgás, jobb megjelenítés. Ebben a módban a **Stílus** (Nincs, Egyéni, Snazzy stílus) beállítások már nem működnek: a Snazzy Maps vagy JSON alapú stílus nem támogatott. Egyéni stílust a Google Cloud Console-ban kell beállítanod a Map Styling funkcióval. Ha kikapcsolod az új API-t, a klasszikus megjelenítés visszatér, és a **Stílus** használható marad:

- **Egyéni**: ide illeszthetsz be JSON-értékeket, amelyeket a Snazzy Maps oldal exportál.
- **Snazzy stílus**: előre elkészített grafikai stílusok.

A Google API-változásai miatt a stílusok beillesztése korlátozott, ezért érdemes az új API-t és a Google Cloud Console-os stílust használni.

## Jelölő

![A Jelölő szakasz](./kepek/terkepek-google-maps-jelolo.webp)

*A Jelölő szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

A jelölő a pont helyét mutatja a térképen. Három forrásból adhatsz neki képet:

- **Jelölő egy ACF képmezőből**: a bejegyzéshez tartozó ACF képmezőt használja a Google Map mező mellett. A mezőt a **Válaszd ki a mezőt…** listából választod.
- **Jelölő képe**: kép a médiatárból (**Kép kiválasztása**).
- **Dinamikus címke**: a jelölő képe dinamikusan is megadható. A kép mező melletti **Dinamikus címkék** ikonnal válassz forrást, például a bejegyzés kiemelt képét. Ekkor a kiemelt kép lesz a jelölő a térképen.

A **Szélesség kényszerítése** és a **Kényszerített magasság** a jelölő méretét állítja (alapérték: 20).

## Információs ablak

![Az Információs ablak szakasz](./kepek/terkepek-google-maps-infowindow.webp)

*Az Információs ablak szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

Az információs ablak (InfoWindow) a jelölő fölött felugró buborék, amelyben adatokat jeleníthetsz meg. A beállítások:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Információs ablak | Bekapcsolja az ablakot. | Igen |
| InfoWindow bezárása a térképen kívüli egérkattintásra | Kattintásra bezárja a megnyitott ablakot. | Nem |
| Egyszerre egy InfoWindow megnyitása | Új ablak megnyitásakor a többit bezárja. | Nem |
| Hivatkozás URL-re | A buborékot hivatkozássá teszi. | Nem |
| Renderelés | Az ablak tartalmának forrása (lásd lent). | Egyszerű |

A **Renderelés** három módja:

- **Egyszerű mód**: egy szövegmező vagy kiválasztható mezők. A megjelenő mezők a térkép típusától és a lekérdezéstől függenek (az **Egyéni szöveg** itt vizuális szerkesztővel írható).
- **Dinamikus HTML**: haladó megoldás, a Dynamic Shortcodes segítségével bármit megjeleníthetsz.
- **Sablon**: Elementor-sablon az ablak tartalmához. Ha a térkép bejegyzéstípusra épülő lekérdezést használ, minden bejegyzéshez a saját dinamikus adatai kerülnek az ablakba.

## Vezérlők

![A Vezérlők szakasz](./kepek/terkepek-google-maps-vezerlok.webp)

*A Vezérlők szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=55&action=elementor)

A térképen megjelenő vezérlők egyenként kapcsolhatók (alapból mind **Igen**):

| Vezérlő | Mit csinál |
| --- | --- |
| Térképtípus-vezérlő | A látogató válthat a Térkép, Műhold, Hibrid és Domborzat között. Alapból a bal felső sarokban van. |
| Térképmozgató vezérlő | A térkép mozgatására szolgáló vezérlő. |
| Forgatásvezérlő | Ferde (oblique) képeket tartalmazó térképek forgatása. Alapból jobb alul van. |
| Méretarányjelző | A térkép méretarányát mutatja. |
| Street View-vezérlő | A Pegman ikont a térképre húzva Street View nézetet nyithatsz. Alapból jobb alul van. |
| Nagyításvezérlő | „+” és „-” gombok a nagyításhoz. Alapból jobb alul van. |
| Teljes képernyős mód vezérlője | Teljes képernyőre váltás. Asztali és mobil eszközön is elérhető, de iOS-en nem támogatott. |
| Jelölőcsoportosító | Egymáshoz közeli jelölőket csoportosít, és a csoportban lévő jelölők számát mutatja. Több helyszínes térképen hasznos. |