# Térkép (Google) elem

> A Google Maps alapú Térkép elem: egy vagy több cím, lekérdezési ciklus, szinkron a lekérdezéssel, jelölők, csoportosítás, infóbuborék és térképinterakciók.

A **Térkép (Google)** elem Google-térképet jelenít meg: egyetlen helyet vagy lekérdezésből érkező, több jelölős térképet.

![A Térkép (Google) elem beállításai API-kulcs nélkül](./kepek/elemek-3-map.webp)

*A Térkép (Google) elem beállításai API-kulcs nélkül* (https://minta-bolt.hu/elemek/?bricks=run)

A képen az API-kulcs nélküli állapot látszik: a **Cím**, a **Magasság**, a **Nagyítási szint**, a **Térképtípus** és a **Betöltés** beállítás. Az elem API-kulcs nélkül is működik, de csak egyetlen jelölőt tud megjeleníteni.

## API-kulcs és megjelenítési mód

A Google Maps API-kulcsot a **Bricks → Beállítások → API keys** résznél kell megadni. Kulcs nélkül az elem a Google Maps beágyazott (iframe) módját használja egyetlen címmel. Jelölőt úgy jeleníthetsz meg, ha a **Cím** mezőbe vesszővel elválasztva beírod a szélességi és a hosszúsági fokot.

Mentett kulccsal megjelenik a **Megjelenítési mód** választó:

- **Google Maps JavaScript API** (alapértelmezett): minden funkció elérhető (több jelölő, csoportosítás, lekérdezés-szinkron, egyéni infóbuborék).
- **Iframe-beágyazás**: akkor jó, ha csak egy címet kell mutatni, és nincs szükség az API-s funkciókra. Ez a mód nem tölti be a Google Maps JavaScript API-t. A **Betöltés** értéke `lazy` (alapérték) vagy `eager`.

## Több cím megjelenítése

A több helyszín megadásához mentett API-kulcs és a JavaScript API mód kell. A címek három módon adhatók meg.

### 1. Statikus

Kézzel adod meg a helyszíneket a **Címek** ismétlőben. Ez a mód csak a Google alapértelmezett infóbuborékját támogatja. Egy címhez a következők tartoznak:

| Beállítás | Mit csinál |
| --- | --- |
| Szélesség, Hosszúság | A helyszín koordinátái. Pontosabb, mint a cím. |
| Cím | Címkeresés (geokódolás) koordináták helyett. |
| Infóbuborék sablon | Az infóbuborékhoz használt sablon. |
| Cím (Title), Alcím, Tartalom | Az infóbuborék szövegei. |
| Képek | Az infóbuborék képei. |
| Szélesség (px) | Az infóbuborék szélessége, 300 az alapérték. |
| Címke | A jelölő képernyőolvasós (`aria-label`) felirata. |
| Jelölő: szöveg, Jelölő: szöveg (aktív) | A szöveges jelölő felirata, alapértelmezett és aktív állapotban. |
| Jelölő: kép, Jelölő: kép (aktív) | A képes jelölő képe, alapértelmezett és aktív állapotban. |

### 2. Lekérdezési ciklus

A térkép helyszínei egy lekérdezésből jönnek. Ha például van egy „Ingatlanok” egyéni bejegyzéstípusod, amelynek egyéni mezője a cím, a ciklus az összes ingatlant jelölőként teszi a térképre. Az infóbuborék egy popup-sablonnal egyedileg kialakítható. A koordináták pontosabbak, mint a szöveges cím.

| Beállítás | Mit csinál |
| --- | --- |
| Ciklus van | Bekapcsolja a lekérdezési ciklust. |
| Lekérdezés | A megjelenítendő bejegyzések lekérdezése. |
| Infóbuborék: sablon | A ciklus infóbuborékához használt popup-sablon. |

### 3. Szinkron a lekérdezéssel

Akkor való, ha a térkép egy dinamikus lekérdezési ciklus (például címtár) mellett áll, és élőben követi azt, amikor a látogató AJAX-os lapozást, a „Továbbiak betöltése” gombot vagy lekérdezésszűrőket használ.

1. Tedd a lekérdezési ciklust ugyanarra az oldalra, ahol a térkép van.
2. A ciklus elemébe (minden egyes ciklusbeli elembe) helyezz el egy [Térkép-összekötő](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-terkep-osszekoto/) elemet.
3. A térkép elemén válaszd ki a szinkronizálandó lekérdezést a szinkron beállításnál.

| Beállítás | Mit csinál |
| --- | --- |
| Szinkron a lekérdezéssel | A térkép összekapcsolása egy meglévő lekérdezési ciklussal. |
| Szöveg: nincs találat | A térképen megjelenő üzenet, ha nincs helyszín. Alapértelmezett: „No locations found”. |

A jelölők a lekérdezés eredményeivel együtt frissülnek. Az egyéni infóbuborék ebben a módban is használható popup-sablonnal.

## Jelölők

A jelölők közös beállításai a **Jelölők** csoportban vannak.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Csoportosítás: jelölők | A közeli jelölőket automatikusan csoportba vonja. | Ki |
| Csoportosítás: háttérszín | A csoportjelölő háttérszíne. | Nincs |
| Csoportosítás: szövegszín | A csoportjelölő szövegszíne. | Nincs |
| Jelölő típusa | `image` (kép) vagy `text` (szöveg). | image |

A szöveges jelölőn a legnagyobb szélességet, a tipográfiát, a háttérszínt, a szegélyt, a dobozárnyékot és a belső távolságot állíthatod, külön az aktív állapotra is. A képes jelölőn a képet, a magasságot és a szélességet (alapérték 40 px mindkettő), a szegélyt és a dobozárnyékot, szintén külön az aktív állapotra.

## Térkép beállításai

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Térkép azonosító (Map ID) | A Google Cloud Console-ban létrehozott térképazonosító. Megadásakor a Bricks a modern `AdvancedMarker` API-t használja, a térkép stílusát a Google Console kezeli (a Bricks stílusbeállításai kikapcsolnak), és elmaradnak a böngésző-konzol elavulási figyelmeztetései. | Üres |
| Megjelenítési mód | Google Maps JavaScript API vagy iframe-beágyazás (csak mentett kulccsal). | JavaScript API |
| Betöltés | Iframe módban `lazy` vagy `eager`. | lazy |

### Térkép középpontja

Szélesség, hosszúság vagy cím megadásával jelölöd ki a térkép alapértelmezett középpontját. A lekérdezés-szinkronnál ez azért fontos, mert ha a szinkronizált lekérdezés nem ad találatot, a térkép ide áll vissza.

### Általános beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Magasság** | A térkép magassága. | 300px |
| **Nagyítási szint** | A kezdő nagyítás, 0 és 20 között. | 12 |
| **Térképtípus** | `roadmap`, `satellite`, `hybrid` vagy `terrain`. | roadmap |
| Térképstílus | Előre elkészített stílusok (csak roadmap típusnál). | Nincs |
| Egyéni térképstílus | JSON-kód (például Snazzy Maps) az egyéni stílushoz, az **Alkalmaz** gombbal élesíthető. | Üres |
| Térkép igazítása a jelölőkhöz | A nézet automatikusan a jelölőkre áll, ha azok változnak. | Ki |
| Görgetés | Nagyítás az egérgörgővel. | Be |
| Húzható | A térkép húzással mozgatható. | Be |
| Teljes képernyő vezérlő | Teljes képernyős gomb. | Ki |
| Térképtípus vezérlő | Térképtípus-választó. | Ki |
| Street View vezérlő | Street View gomb. | Be |
| Alapértelmezett felület letiltása | Elrejti az összes alapvezérlőt. | Ki |
| Kattintható érdekes helyek letiltása | A térképen lévő POI-k nem kattinthatók. | Ki |
| Nagyítás vezérlő | Nagyítás és kicsinyítés gombjai. | Be |
| Nagyítási szint (min.), (max.) | A legkisebb és a legnagyobb engedélyezett nagyítás. | Nincs |

## Infóbuborék (popup-sablon)

Az egyéni infóbuborékot popup-sablonnal készíted. A popup-sablon beállításai között kapcsold be az **Infóbuborék (térkép)** lehetőséget.

- A szerkesztőben a popup alapértelmezetten 300 px széles, és az előnézet nem mutat hátteret.
- A tartalma AJAX-szal is betölthető, a betöltés közben töltésjelző animáció látszik.
- A **Tartalom kitöltése** beállításnál érdemes a ciklusban használt bejegyzést vagy kifejezést választani, hogy a dinamikus adat a szerkesztőben is látszódjon.

## Térképinterakciók

Két interakció kezeli az infóbuborékot:

- Cím megnyitása (térkép)
- Cím bezárása (térkép)

Használatuk: egy gombbal vagy elemmel a lekérdezési cikluson belül megnyithatod az adott jelölő infóbuborékját, az infóbuborék popupjába pedig bezáró ikont tehetsz.

Amikor egy infóbuborék kinyílik, a Bricks az adott jelölőhöz tartozó interakciós elemekre ráteszi az `infobox-opened` osztályt, bezáráskor leveszi. Ezzel a nyitott állapot stílusozható, vagy akár az interakciós elemet tartalmazó szülő is:

```css
.looping-div:has(.infobox-opened) {
  background-color: blue;
}
```

## Ütközés más bővítmények Google Maps szkriptjével

Ha egy másik bővítmény (például egy űrlapbővítmény) ugyanazon az oldalon tölti be a Google Maps szkriptet, JavaScript-ütközés lehet, mert a szkript nem tölthető be kétszer. Ilyenkor a Bricks szkriptjét kiveheted a betöltésből, és a `bricksMap()` függvényt kis késleltetéssel kézzel hívhatod meg:

```php
add_action( 'wp_enqueue_scripts', function() {
  if ( is_page( 1567 ) ) {
    wp_deregister_script( 'bricks-google-maps' );
  }
}, 999 );

add_action( 'wp_footer', function() {
  if ( is_page( 1567 ) ) {
    echo '<script>
      document.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
          bricksMap();
        }, 1000);
      });
    </script>';
  }
}, 999 );
```

Az `1567` helyére a saját oldalad azonosítóját írd, a késleltetést pedig állítsd úgy, hogy a másik bővítmény térképszkriptje már biztosan betöltődjön.