Wordpress

Průvodce Mapami Google WordPress: Vložení s pluginem nebo bez něj

Hledáte způsob, jak vložit obsah Map Google WordPress na svůj web?

Stejně jako mnoho věcí ve WordPressu existuje několik různých způsobů, jak můžete Mapy Google vložit na svůj web v závislosti na tom, jaký typ obsahu mapy chcete zahrnout.

V tomto příspěvku začneme tím, že vám ukážeme, jak přidat Mapy Google do WordPress bez pluginu. Poté vám doporučíme některé pluginy umět vám pomohou vložit Mapy Google a také některé výhody tohoto přístupu. Také se ponoříme do toho, jak správně používat Google Maps API, které je nyní vyžadováno.

Nakonec skončíme několika úvahami o výkonu při používání Map Google na WordPress a podělíme se o několik tipů, jak zajistit rychlé načítání webu WordPress, i když potřebujete vložit Mapy Google.

Kliknutím níže můžete přejít přímo na konkrétní sekci nebo si to celé přečíst.

  • Nyní je vyžadováno rozhraní Google Maps API
  • Jak přidat Mapy Google do WordPress bez pluginu
  • Pluginy WordPress Map Google, které vám poskytují větší flexibilitu
  • Efekt výkonu Map Google a tipy ke zlepšení výkonu

Nyní je vyžadováno Google Maps API

Ke dni 11. června 2018 byla uzavřena an Pro Mapy Google je nyní vyžadován klíč API. Pokud jste již na svůj web implementovali Mapy Google a již nefungují, může to být důvodem. Nebo vám spíše chybí API klíč. Dobrou zprávou je, že pro 99 % z vás by to mělo být stále zdarma. Níže je uvedena cena Google Maps API.

Ceny Google Maps API

Ceny Google Maps API

Společnost Google vám také každý měsíc poskytuje na váš fakturační účet opakující se kredit 200 $, který kompenzuje vaše náklady na používání. Jak tedy vidíte, pokud negenerujete tisíce požadavků, používání Map Google na vašem webu by vás nemělo nic stát.

Co dalšího se změnilo? Nic, ale pokud chcete používat Mapy Google ve WordPressu, nyní budete muset udělat následující:

  1. Zaregistrujte si účet Google Cloud Platform Console a nakonfigurujte jej.
  2. Přidejte své fakturační údaje, i když vám možná nikdy nebudou účtovány.
  3. Přidejte klíč API do kódu pro vložení do Map Google nebo nastavení pluginu.

Jak získat klíč API pro Mapy Google

Níže jsou uvedeny kroky, jak získat klíč API pro Mapy Google.

Krok 1

Přejděte do konzoly Google Cloud Platform Console. Pokud ještě nemáte účet, vytvořte si jej, je to zdarma.

Krok 2

Vyberte nebo vytvořte projekt.

Krok 3

Nastavte si fakturační účet. I když po vás budou vyžadovat, abyste zaregistrovali kreditní kartu, nikdy by vám neměly být účtovány poplatky, pokud nepřekročíte vysoké limity používání.

Krok 4

Budete požádáni o výběr jednoho nebo více produktů. To závisí na typu mapy, kterou používáte. Pokud například vkládáte mapu na svůj web WordPress bez pluginu (jak je znázorněno v krocích níže), pak byste si vybrali Google Maps Embed API.

Google Maps Embed API

Google Maps Embed API

Pokud používáte plugin jako Google Maps Widget (jak je znázorněno v krocích níže), pak byste zvolili Google Maps Static API.

Pokud používáte plugin nebo motiv třetí strany, měli by mít dokumentaci o tom, jaký typ nasazení Map Google používají. Nebojte se, vždy můžete přidat více typů a později je změnit.

Krok 5

Klikněte na „Povolit“.

Povolit Google Maps API

Povolit Google Maps API

Krok 6

Klikněte na „API“ a poté v části „Přihlašovací údaje“ uvidíte svůj klíč API.

Klíč Google Maps API

Klíč Google Maps API

Krok 7

Pokud jednoduše vkládáte svůj klíč API Map Google, zobrazí se ve zdrojovém kódu jako prostý text. Proto byste to měli omezit, jinak by lidé mohli použít váš klíč API na svém webu nebo projektech WordPress a zvýšit vaše využití.

Chcete-li to provést, jednoduše klikněte na název klíče API a umožní vám přidat omezení. Pro váš web WordPress by mělo stačit pouhé přidání referreru HTTP. Jako https://yourdomain.com/*. To mu umožní volat pouze na váš web.

Omezení klíče API Map Google

Omezení klíče API Map Google

Jak přidat Mapy Google do WordPress bez pluginu

Pokud chcete pouze vložit jednoduchou mapu a nepotřebujete podrobnější funkce, jako jsou vlastní značky polohy nebo jiné poznámky, můžete Mapy Google vložit bez pluginu pomocí běžného webu Map Google, který denně používáte.

Funguje to takto ...

Krok 1: Zkopírujte kód pro vložení Map Google

Chcete-li začít, použijte web Map Google k vytvoření mapy, kterou chcete vložit.

Pokud chcete například vložit značku místa, otevřete toto místo v Mapách Google. Nebo, pokud chcete vložit trasu, otevřete ji v Mapách Google.

Jakmile budete mít mapu, kterou chcete vložit, klikněte na nabídku hamburgerů v levém horním rohu:

Jak získat přístup k vkládacímu kódu

Jak získat přístup k vkládacímu kódu

V seznamu položek nabídky vyberte možnost pro Sdílejte nebo vložte mapu:

Otevřete možnosti vložení

Otevřete možnosti vložení

Tím se otevře a Share vyskakovat. V tomto vyskakovacím okně klikněte na Vložit mapu Karta.

Poté si můžete vybrat požadovanou velikost pomocí rozevíracího seznamu. U většiny webů WordPress výchozí velikost funguje dobře, ale v případě potřeby můžete mapu zvětšit nebo zmenšit.

Jakmile to uděláte, klikněte na Kopírovat HTML tlačítko pro zkopírování kódu pro vložení:

Kód pro vložení Map Google pro WordPress

Kód pro vložení do Map Google

Poté budete muset do kódu přidat svůj klíč API. Váš kód by tedy měl vypadat nějak takto:

Krok 2: Přidejte kód pro vložení Map Google na web WordPress

Nyní vše, co musíte udělat, je přidat tento kód pro vložení na váš web WordPress do příspěvku nebo stránky, kam chcete vložit svou mapu.

Pokud používáte nový editor bloků WordPress Gutenberg, který byl vydán s WordPress 5.0, můžete to udělat přidáním Vlastní HTML blok a vložení kódu pro vložení do bloku. Nezapomeňte přidat svůj API klíč.

Jak přidat kód pro vložení do editoru bloků WordPress

Jak přidat kód pro vložení do editoru bloků WordPress

Kliknutím na ikonu si můžete prohlédnout, jak bude vaše mapa vypadat Náhled tlačítko nad blokem.

Pokud stále používáte klasický editor TinyMCE, můžete přidat kód pro vložení Map Google otevřením text tabulátor a vložte tam kód:

Jak přidat kód pro vložení do editoru WordPress Classic

Jak přidat kód pro vložení do editoru WordPress Classic

Jakmile přidáte kód, můžete se vrátit k Vizuální zobrazíte živý náhled mapy.

A to je vše! Právě jste se naučili, jak přidat Mapy Google do WordPress bez pluginu.

Použijte Moje mapy Google k vložení složitějších map bez pluginu

Pokud chcete být kreativnější, pokud jde o věci, jako je více značek polohy, vlastní poznámky atd., stále to můžete udělat, aniž byste potřebovali plugin se službou Moje mapy Google.

Moje mapy je oficiální nástroj od společnosti Google, který vám umožňuje vytvářet a sdílet vlastní mapy. S ním můžete vytvořit něco jako příklad níže, se spoustou vlastních značek a vlastních informací, které se zobrazí, když uživatel klikne na značku:

Příklad služby Moje mapy Google

Příklad služby Moje mapy Google

Zde je návod, jak jej použít k přidání vlastních Map Google do WordPress.

Krok 1: Vytvořte si mapu ve službě Moje mapy Google

Chcete-li začít, přejděte do Moje mapy Google a vytvořte novou mapu. Odtud můžete k vytvoření mapy použít rozhraní pro tvorbu map:

Rozhraní služby Moje mapy Google

Rozhraní služby Moje mapy Google

I když se tím nebudeme zabývat příliš podrobně, toto rozhraní vám umožní vytvořit docela kreativní mapy. Pro hlubší pohled tento článek nápovědy od společnosti Google pokrývá mnoho důležitých funkcí.

Krok 2: Vygenerujte kód pro vložení

Jakmile dokončíte vytváření mapy, musíte vygenerovat kód pro vložení.

Než však získáte tento kód, musíte mapu nejprve zveřejnit. Chcete-li to provést, klikněte na Share knoflík. Poté klikněte na Přeměna…ve vyskakovacím okně:

Nastavení sdílení ve službě Moje mapy Google

Nastavení sdílení ve službě Moje mapy Google

Potom vyberte On - Veřejné na webu a klepněte na tlačítko Uložit:

Zapněte Sdílení odkazů

Zapněte Sdílení odkazů

Jakmile to uděláte, klikněte na rozbalovací nabídku u názvu mapy a vyberte Vložit na můj web pro vygenerování skutečného kódu pro vložení:

Získejte přístup k vkládacímu kódu Moje mapy

Získejte přístup k vkládacímu kódu Moje mapy

Otevře se vyskakovací okno s kódem, který byste měli zkopírovat. Nezapomeňte přidat svůj API klíč.

Kód pro vložení Moje mapy

Kód pro vložení Moje mapy

Krok 3: Přidejte kód pro vložení na web WordPress

Nyní můžete tento kód pro vložení přidat na svůj web WordPress stejně jako kód pro vložení, který získáte z běžného webu Map Google.

Pokud si nejste jisti, jak to udělat, klikněte sem a přejděte na tuto část výukového programu shora.

Místo toho použijte plugin Google Maps pro WordPress

Kromě výše uvedených manuálních metod existuje také spousta pluginů WordPress Google Maps, které vám mohou pomoci vložit mapy na váš web.

Existuje několik důvodů, proč byste měli zvážit některý z těchto pluginů před manuálními metodami:

  • Umožňují vám vytvářet složitější mapy s jednoduchým rozhraním.
  • Můžete dělat vše, aniž byste museli opustit hlavní panel WordPress.
  • Některé z nich odkazují na WordPress. Například můžete být schopni propojit mapové značky s příspěvky WordPress.
  • Některé z nich vám mohou pomoci optimalizovat výkon Map Google (více o tom později).

Pro všechny tyto pluginy si budete muset vygenerovat svůj vlastní Google Maps API Key, než budete moci začít vkládat mapy. Tento tutoriál vám ukáže, jak na to.

Potýkáte se s výpadky a problémy s WordPress? Behmaster je hostingové řešení navržené tak, aby vám šetřilo čas! Podívejte se na naše funkce

Widget Google Maps

Widget Google Maps je jednoduchý plugin pro Mapy Google, který vám umožňuje vložit mapu pomocí rozhraní Google Maps Static API, které nabízí přístup šetrnější k výkonu tím, že namísto interaktivní mapy vloží statický obrázek (více o tom vysvětlíme v další části).

Je to skvělá volba, pokud chcete něco jednoduchého a lehkého. Jakmile jej aktivujete, budete muset uchopit klíč Google Maps API a zapojit jej do nastavení pluginu. Mapu Google můžete přidat do libovolné oblasti widgetů na vašem webu. Poté mohou návštěvníci otevřít větší interaktivní verzi mapy v okně lightbox:

Rozhraní widgetu Map Google

Rozhraní widgetu Map Google

V případě potřeby můžete také okamžitě použít interaktivní mapu a verze Pro vám umožňuje vkládat mapy kamkoli na váš web pomocí krátkého kódu.

Google Maps snadné

Google Maps Easy vám pomůže vytvořit vlastní mapy s vlastními značkami a poznámkami.

Když přidáte značky, máte možnost nahrát své vlastní ikony, zahrnout text a obrázky do popisu značky a mnoho dalšího. Můžete také ovládat, jak bude vaše mapa fungovat, například zvolit, zda chcete uživatelům umožnit přibližování:

Jednoduché rozhraní Google Maps

Jednoduché rozhraní Google Maps

Jakmile mapu vytvoříte, můžete ji vložit buď pomocí krátkého kódu nebo funkce PHP.

Intergeo

Intergeo je další oblíbená možnost, která vám umožňuje vytvářet vlastní mapy s vlastními značkami a ovládat funkce mapy.

Jakmile plugin nainstalujete a aktivujete, budete moci vytvářet své mapy přímo z řídicího panelu WordPress:

Intergeo rozhraní

Intergeo rozhraní

Poté je můžete vložit kamkoli na svůj web pomocí krátkého kódu.

Gutenbergův blok pro vložení Map Google

Gutenberg Block For Google Maps Embed je jednoduchý plugin, který přidává vyhrazený blok Google Maps do nového editoru bloků WordPress Gutenberg.

S tímto blokem můžete vložit libovolnou adresu a také si vybrat:

  • Rozměry
  • úroveň přiblížení
  • Interaktivní mapa vs statická mapa (opět druhá metoda pomáhá s výkonem)

Nedovolí vám vytvářet vlastní mapy – ale je to pohodlná možnost, pokud používáte nový editor bloků a chcete jednoduchý způsob, jak zahrnout nějaké jednoduché mapy.

Mapy Google mohou zpomalit váš web WordPress – nenechte to

I když vám Mapy Google umožňují vložit do svých stránek spoustu skvělých funkcí pomocí svých interaktivních map, existuje zde kompromis ohledně výkonu, protože je třeba načíst velké množství skriptů, aby bylo možné využívat všechny tyto interaktivní funkce.

Stručně řečeno, vkládání interaktivních Map Google může zpomalit váš web.

Existuje několik způsobů, jak s tím bojovat.

Za prvé, pokud nepotřebujete, aby lidé mohli interaktivně procházet vaši mapu na vašem webu, jednoduchý způsob, jak věci urychlit bez jakýchkoli nástrojů třetích stran, je:

  • Pořiďte snímek obrazovky mapy, kterou použijete na svém webu
  • Propojte tento snímek obrazovky s mapou na webu Map Google nebo po kliknutí uživatele otevřete vyskakovací okno s interaktivní mapou.

Tímto způsobem vaše stránky načítají pouze běžný obrázek – ne všechny skripty spojené s Mapami Google.

Jako alternativu k ručnímu provádění můžete také použít bezplatný plugin AWEOS Google Maps iframe load per click. Tento plugin automaticky nahrazuje vložení Map Google obecným zástupným obrázkem. Poté, pokud uživatel klikne na Načíst mapu tlačítko, načte se úplné vložení Map Google:

Zástupný obrázek Map Google

Zástupný obrázek Map Google

Nebo můžete také použít Google Maps Static API, které vrací běžný obrázek bez JavaScriptu. Některé pluginy Google Maps – včetně Google Maps Widget a Gutenberg Block For Google Maps Embed – vám umožňují při vytváření map použít statické API.

Uvědomujeme si však, že někdy to tento statický přístup prostě nevyřeší a mnoho lidí chce interaktivní zážitek z Map Google okamžitě začlenit.

Pokud je tomu tak, dalším dobrým způsobem, jak urychlit Mapy Google, je použití líné načítání. Při líném načítání bude váš web čekat na načtení všech vložených prvků Map Google pod okrajem, dokud návštěvníci nezačnou stránku posouvat dolů. Díky tomu bude vaše počáteční načítání stránky rychlé a zároveň vám umožní vložit interaktivní obsah Map Google.

O tom, jak líně načítat obrázky a videa, jsme již psali a je to stejný nápad pro Mapy Google.

Existuje několik pluginů, které vám to umožní. Například plugin a3 Lazy Load vám umožňuje líné načítání vložených prvků iframe, které zahrnují Mapy Google:

Líné načítání Map Google

Líné načítání Map Google

Další možnosti jsou:

  • BJ Lazy Load
  • Lazy Load od WP Rocket
  • Easy Lazy Loader

Shrnutí

Pokud chcete na svůj web pouze vložit jednoduchou mapu, můžete Mapy Google přidat do WordPressu bez pluginu pomocí vestavěné funkce pro vložení kódu. Nebo můžete použít nástroj Moje mapy Google a vytvořit si vlastní mapu a vložit ji.

Kromě těchto manuálních metod existuje také spousta pluginů WordPress pro Mapy Google, které vám mohou poskytnout spoustu kontroly, aniž byste museli opustit hlavní panel WordPress.

Bez ohledu na to, kterou metodu zvolíte, věnujte pozornost vlivu používání Map Google na výkon. Snažte se používat Mapy Google pouze tehdy, když je to absolutně nutné, a zvažte taktiku, jako jsou zástupné obrázky nebo líné načítání, abyste snížili negativní vliv na výkon.

Máte nějaké další otázky ohledně používání Map Google na WordPress? Dejte nám vědět v komentářích!

Související články

0 Komentáře
Vložené zpětné vazby
Zobrazit všechny komentáře
Tlačítko Nahoru