MagyarmagyarGoogle Térkép widget és API-kulcs
Google Térkép beágyazása az oldalra: az API-kulcs létrehozása a Google Cloud Console-ban, megadása az Elementorban, a widget beállításai és a rámutatási hatás.
A Google Térkép widget egyszerű módja annak, hogy Google-térképet ágyazz be az oldalra. Kapcsolat oldalon különösen hasznos, hogy a látogatók lássák, hol találnak meg.
Mire jó?
Szekció neve “Mire jó?”- Egy új étterem nyitóoldalán a térkép segít az új vendégeknek odatalálni.
- Utazási iroda térképen mutatja az útvonalakat.
- Ingatlanközvetítő az eladó házak helyét jelöli.
- Szállodalánc az egyes szállodák helyét mutatja.
A widget használata előtt: Google API-kulcs
Szekció neve “A widget használata előtt: Google API-kulcs”A widgethez Google API-kulcs kell. Ehhez Google-fiók, egy projekt számlázási fiókkal, és az engedélyezett Maps Embed API szükséges.
A kulcs megszerzése a Google Cloud Console-ban
Szekció neve “A kulcs megszerzése a Google Cloud Console-ban”- A Google Cloud Platformon hozz létre egy új projektet. Adj neki egyedi nevet (a projekt neve később nem módosítható), add meg a szervezet nevét és a projekt helyét.
- A bal oldali menüben nyisd meg a Billing (számlázás) oldalt, és állítsd be a számlázási adatokat. Az első lépésben válaszd ki az országot, fogadd el a felhasználási feltételeket, és kattints a folytatásra. A másodikban válaszd ki a fiók típusát, add meg a cég nevét, a fizetési módot és annak adatait (például bankkártya), majd indítsd el az ingyenes próbaidőszakot. Ezzel a projekt számlázási adatai rendben vannak.
- Az APIs and Services → Credentials oldalon kattints a + Create Credentials hivatkozásra, és válaszd az API key lehetőséget. Megkapod a kulcsot. A saját védelmedben érdemes korlátozni, hogy máshol ne lehessen használni.
- Az APIs and Services felületen nyisd meg a Library oldalt, keress rá a „Maps” szóra, és válaszd ki a Maps Embed API-t, mert az Elementor widgetnek erre van szüksége. Engedélyezd. Az API ezután megjelenik az elérhető API-k listájában, és adatot kezd gyűjteni.
A kulcs megadása az Elementorban
Szekció neve “A kulcs megadása az Elementorban”- A WordPress admin felületén nyisd meg az Elementor → Beállítások oldalt.
- Kattints az Integrációk fülre.
- A Google Maps beágyazási API mezőbe másold be az API-kulcsot.
- Kattints a Változtatások mentése gombra. Ezután használhatod a widgetet.
A képen az Integrációk fül látszik a Google Maps API-kulcs mezőjével. A fül többi beállításáról lásd: Az Elementor beállításai.
Térkép beszúrása lépésről lépésre
Szekció neve “Térkép beszúrása lépésről lépésre”- Húzd a Google Térkép widgetet a vászonra. A beállításai a bal oldali panelen jelennek meg. A widget hozzáadásáról lásd: Elemek hozzáadása az oldalhoz.
- A panelen add meg a Helyszín mezőben azt a helyet, amelyet a térképen meg akarsz jeleníteni.
- A csúszkával állítsd be a térkép magasságát.
Ha szeretnéd, hogy a térkép megjelenése változzon, amikor a látogató fölé viszi az egeret:
- Kattints a Stílus fülre.
- A Normál állapotnál kattints a CSS-szűrők melletti ceruza ikonra, és a csúszkával csökkentsd a Kontrasztot 60-ra.
- Kattints a Rámutatás fülre, ott is a ceruza ikonra, és emeld a Kontrasztot 120-ra. A térkép így „kiemelkedik”, ha a látogatók fölé viszik az egeret.
A képen a Helyszín mező, a Zoom és a Magasság csúszkája látszik. A panel tetején a figyelmeztetés arra emlékeztet, hogy az API-kulcsot az Integrációs beállítások oldalon kell megadni.
A képen a Normál és a Rámutatás állapot, alattuk a CSS-szűrők látszik.
A widget beállításai
Szekció neve “A widget beállításai”Tartalom fül
Szekció neve “Tartalom fül”| Beállítás | Mit csinál |
|---|---|
| Helyszín | A hely, amelyre a térkép középre áll. Bármi megadható, amit a Google Térkép azonosítani tud |
| Zoom | Csúszkával szabályozza, mennyire közelítsen rá a térkép a területre |
| Magasság | A térkép magassága csúszkával |
Stílus fül
Szekció neve “Stílus fül”| Beállítás | Mit csinál |
|---|---|
| Normál és Rámutatás | Hogyan jelenjen meg a térkép alapból, és hogyan, ha a látogató fölé viszi az egeret |
| CSS-szűrők | Csúszkák: Elmosás (lágy fókusz), Fényerő, Kontraszt, Telítettség és Árnyalat (a színek elforgatása a színkörön). Lásd: Keverési módok és szűrők |
| Átmenet időtartama | Rámutatási hatás esetén azt adja meg, mennyi idő alatt jelenik meg a hatás |
Haladó fül
Szekció neve “Haladó fül”A Haladó fülön a widget helyét, linkjeit és egyedi kódját állíthatod. Lásd: Haladó fül.
Az eredmény az oldalon
Szekció neve “Az eredmény az oldalon”
A képen a beágyazott térkép látszik a cím alatt.
Készült: