Térkép (Google) elem

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.

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ő 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:

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

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.