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

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.

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

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.

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

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.

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

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

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.

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 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 fejezet írja le.