Google Maps na webu přináší hned několik výhod. Uživatelům se zjednoduší případná návštěva firmy, nebo prodejny a také si budou moci prohlédnout okolí lokality a naplánovat si například další aktivity na daném místě.
Přidání Google map do WordPressu je velmi jednoduchou a rychlou záležitostí, kterou zvládne téměř každý.
Mapu lze do WordPressu přidat hned několika způsoby:
#1 Vložení mapy bez pluginu
Základní mapa
Ukážeme si, jak na web dostat jednoduchou mapu s označením jednoho místa:
- Přejdeme do Google Maps a vyhledáme požadované místo
- U místa zvolíme možnost sdílení:
- Dále rozklikneme „vložení mapy“ a zkopírujeme HTML kód:
- Přejdeme na náš web, přidáme blok „vlastní HTML“, a mapu sem vložíme:
- Ještě před publikací můžeme v kódu mapy upravit výšku a šířku (doporučuji nastavit na 100% pro přizpůsobení mapy na všech zařízeních)
- Výsledek:
Pokročilá mapa
Pokud bychom chtěli více propracovanou mapu s více body a popisky, můžeme použít službu „Google My Maps„:
- Vytvoříme novou mapu:
- K dispozici máme hned několik nástrojů:
1) Přidat značku – Na mapu můžeme přidávat libovolný počet bodů, u kterých lze stanovit nadpis, popis, ikonku, a barvu ikonky.
2) Nakreslit čáru – Nástroj slouží k vyznačení oblasti na mapě.
3) Přidat trasu – k našemu bodu můžeme přidat trasu pro automobily, cyklisty, nebo pěší
4) Měření vzdálenosti a ploch – Na mapě vyznačíme oblast pro změření
- Na závěr zvolíme vizuál mapy:
- Po finálních úpravách už jen stačí vložit mapu na náš web. Mapa se bude vkládat opět pomocí vygenerovaného kódu. Nejprve však mapu musíme sdílet:
- Po sdílení otevřeme nastavení mapy a zvolíme možnost „vložit na mé stránky„:
- Pro naši mapu se vygeneruje HTML kód, který jednoduše zkopírujeme:
- Na našem webu přidáme nový Gutenberg blok s názvem „vlastní HTML“, kam zkopírovaný kód vložíme:
- Výsledek:
#2 Vložení mapy pomocí pluginu
Druhým způsobem je použití některého pluginu. V dnešním článku se zaměříme na
WP Go Maps, který má více než 400 000 aktivních instalací a umožní pokročilé nastavení Google map na našem webu. Další alternativní pluginy, které stojí za zmínku najdete v tomto článku.
Pokud chceme používat vyloženě Google mapy, budeme muset nejprve přidat API klíč, který vygenerujeme na stránkách https://mapsplatform.google.com/ a následně vložíme do nastavení pluginu.
Postup:
- Nainstalujeme a aktivujeme plugin WP Go Maps (Pluginy > Přidat nový plugin)
- Přejdeme do sekce „Moje mapy“:
- Jelikož používáme free verzi pluginu, budeme mít dostupnou pouze jednu mapu, kterou můžeme upravit(1). Zkrácený kód(2) mapy vložíme na místo, na kterém chceme mapu zobrazit. Pokud používáme Gutenberg, stačí nám použít blok s názvem „zkrácený kód“, do kterého zkopírovanou část vložíme:
- Stránku se zkráceným kódem můžeme zavřít a vrátíme se zpět do sekce „moje mapy“, kde zvolíme možnost „upravit“:
- Hlavní nastavení
- Úroveň přiblížení, nastavení šířky a výšky
- Vzhled
- Výběr motivu mapy
- Navigace
- Dostupná pouze v placené verzi
- Vyhledávač obchodů
- Vyhledávání obchodů, nastavení poloměrů a jednotek vzdálenosti
- Pokročilé nastavení
- Typ mapy (satelitní, cestovní, hybridní a terénní), maximální úroveň přiblížení a oddálení mapy a změna přiblížení mapy na mobilních zařízeních
- Seznam značek
- Pouze v placené verzi
- Po základním nastavení můžeme upravit samotnou mapu:
Pokročilé značení a teplotní mapy jsou opět dostupné v placené verzi pluginu!
- Finální verzi mapy uložíme a přidáme požadovaný API klíč v nastavení pluginu, pokud jsme tak již neudělali. V jiném případě lze změnit mapový modul, u kterého API klíč není zapotřebí (mapový modul lze změnit v nastavení pluginu – na výběr máme pouze modul OpenLayers):
- Po uložení se nám na místě, do kterého jsme vložili zkrácený kód, objeví mapa:
Závěr
Přidání Google Maps do WordPressu je snadné a zvládne ji téměř každý, bez ohledu na technické znalosti. Oba způsoby pro přidání mapy, které jsme si v článku ukázali zajišťují funkční a přehlednou mapu s potřebnými informacemi o požadované lokalitě.
