Šedá mapa na webu s nápisem "Jen pro vývojové účely"? Zde je kompletní průvodce řešením!

Vidíte na svém webu šedou mapu s otravným nápisem "Jen pro vývojové účely" a nevíte co s tím? Nenechte si tím kazit profesionální dojem! Ukážeme vám, jak tento problém snadno a rychle vyřešit.

Proč k tomu dochází?

Tento frustrující obrázek šedé mapy s textem "Jen pro vývojové účely" se stal pro mnoho majitelů webů noční můrou. Není to ale chyba ve vašem webu ani ve světě digitálního marketingu – jde o změnu v tom, jak Google Maps fungují a jsou licencovány. Google se v roce 2018 rozhodl zpřísnit pravidla pro používání svých mapových služeb. Důvodem je snaha zabránit zneužívání, zajistit kvalitu dat a zároveň monetizovat komerční využití pro velké hráče.

Ve zkratce, váš web "nekomunikuje" správně se servery Google Maps. K tomu, aby se mapa zobrazila správně, potřebuje váš web speciální identifikační kód – takzvaný Google Maps API klíč. Ten slouží Googlu k tomu, aby věděl, kdo mapy používá, a mohl kontrolovat oprávnění.

Příčiny šedé mapy jsou obvykle následující:

1. Chybí API klíč: Buď klíč na webu vůbec není, nebo byl kdysi vložen, ale z nějakého důvodu zmizel (například po aktualizaci šablony nebo pluginu).
2. Neplatný nebo špatně nakonfigurovaný API klíč: Klíč existuje, ale není správně omezen na vaši doménu, nebo nemá aktivované potřebné služby (tzv. API knihovny).
3. Není aktivní fakturace: To je nejčastější příčina od roku 2018. Mnoho lidí se zalekne slova "fakturace" a myslí si, že budou muset za mapy platit obrovské částky. Skutečnost je ale taková, že Google nabízí velmi štědrý bezplatný kredit (aktuálně 200 USD měsíčně), který drtivá většina malých firem, jako je ta vaše, nikdy nepřekročí. Aktivace fakturace je pro Google jen způsob, jak si ověřit identitu uživatele a mít záložní platební metodu, pokud by došlo k překročení bezplatného limitu. Bez aktivní fakturace Google mapy prostě nezobrazí a vyhodí nápis "Jen pro vývojové účely".

Nebojte se, tento problém je řešitelný a s naším návodem to zvládnete! Vyřešíte tak problém, který se často skrývá za dotazem "proč mapa nefunguje na webu".

Jak to opravit krok za krokem

Oprava šedé mapy s nápisem "Jen pro vývojové účely" vyžaduje několik kroků v prostředí Google Cloud Platform. Nenechte se zastrašit názvem, provedeme vás tím:

1. Přístup ke Google Cloud Platform Console:

   • Otevřete si webový prohlížeč a přejděte na console.cloud.google.com.
   • Přihlaste se pomocí svého Google účtu (ideálně toho, který používáte pro Google My Business nebo jiné Google služby spojené s vaší firmou). Pokud žádný nemáte, vytvořte si jej.

2. Vytvořte nový projekt (nebo vyberte existující):

   • V horní části obrazovky (vedle loga Google Cloud) klikněte na rozbalovací menu se stávajícím názvem projektu (nebo "Select a project").
   • Klikněte na "Nový projekt". Dejte mu srozumitelný název, například "Můj web - Mapy". Zaznamenejte si ID projektu.
   • Pokud už máte existující projekt, který chcete použít, vyberte jej ze seznamu.

3. Aktivujte potřebná API (služby):

   • Jakmile jste v rámci svého projektu, použijte levé navigační menu nebo vyhledávací pole nahoře a vyhledejte "API a služby" (APIs & Services) a poté "Knihovna" (Library).
   • Zde najděte a aktivujte následující API:
     • Maps JavaScript API: Toto je základní API pro zobrazení interaktivní mapy na vašem webu.
     • Dále doporučujeme aktivovat i Geocoding API (pro převod adres na souřadnice) a případně Places API (pro vyhledávání míst a detailní informace), pokud je vaše mapa komplexnější.
   • U každého API klikněte na "Aktivovat".

4. Vygenerujte API klíč (API Key):

   • V levém menu v sekci "API a služby" klikněte na "Pověření" (Credentials).
   • Klikněte na tlačítko "Vytvořit pověření" a vyberte "Klíč API" (API Key).
   • Vygeneruje se vám dlouhý řetězec znaků. To je váš Google Maps API klíč. Zkopírujte si ho!

5. Omezte API klíč pro bezpečnost:

   • Tento krok je naprosto klíčový pro bezpečnost vašeho klíče! Nikdy nenechávejte API klíč neomezený!
   • Vedle nově vygenerovaného klíče klikněte na "Upravit klíč API" (Edit API Key).
   • V sekci "Omezení klíče" (Key restrictions) vyberte:
     • Omezení aplikací (Application restrictions): Zvolte "Webové stránky (HTTP referery)".
     • Přidat položku (Add an item): Zde vložte adresy vašeho webu. Vždy používejte formát *.vasedomena.cz/* a také vasedomena.cz/*. Tím zajistíte, že klíč bude fungovat pro všechny subdomény a cesty na vaší doméně. Například: *.jasnyweb.cz/* a jasnyweb.cz/*.
     • Omezení API (API restrictions): Zvolte "Omezit klíč". Zde vyberte pouze ta API, která jste aktivovali v kroku 3 (např. Maps JavaScript API, Geocoding API, Places API).
   • Klikněte na "Uložit". Tím jste dokončili nastavení API klíče. Teď jste vyřešili problém "nastavení Google Maps pro web".

6. Aktivujte fakturaci (Billing):

   • V levém menu přejděte na "Fakturace" (Billing).
   • Klikněte na "Aktivovat fakturaci" nebo "Propojit fakturační účet".
   • Postupujte podle pokynů a přidejte platební metodu (kreditní/debetní kartu). Opakujeme: Google poskytuje bezplatný kredit 200 USD měsíčně. Malé a střední podniky obvykle tento limit nepřekročí. Karta je jen záruka pro případ vysokého provozu.

7. Vložte API klíč na váš web:

   • Nyní máte svůj API klíč připravený. Je čas ho vložit na váš web.
   • WordPress: Pokud používáte WordPress, pravděpodobně máte plugin pro mapy (např. WP Google Maps, Advanced Google Maps, nebo je mapa součástí vaší šablony). Přejděte do nastavení daného pluginu nebo šablony a najděte pole pro vložení Google Maps API klíče. Starý klíč nahraďte novým.
   • Ruční implementace: Pokud máte mapu vloženou přímo do kódu webu (např. HTML/JavaScript), najděte řádek, který načítá Google Maps API (bude vypadat nějak takto: <script src="https://maps.googleapis.com/maps/api/js?key=VASTARYKLIC&callback=initMap" async defer></script>) a nahraďte VASTARYKLIC svým novým API klíčem.
   • Pokud si nejste jisti, kde klíč vložit, podívejte se do dokumentace své šablony nebo pluginu.

8. Vyčistěte cache a zkontrolujte:

   • Po vložení klíče je důležité vyčistit cache vašeho webu (pokud používáte caching plugin) a také cache prohlížeče.
   • Otevřete svůj web a ověřte, zda se mapa zobrazuje správně. Pokud ano, gratulujeme! Úspěšně jste opravili "šedou mapu na webu s nápisem Jen pro vývojové účely".

Kdy je lepší svěřit to odborníkovi?

Ačkoliv jsme se snažili popsat proces co nejjednodušeji, víme, že práce s Google Cloud Platform může být pro někoho, kdo se s ní nesetkává denně, docela oříšek. Pokud se při těchto krocích cítíte nejistě, máte obavu z nastavení fakturace, nebo narazíte na nečekané problémy (například "Google Maps API klíč zdarma" nefunguje tak, jak byste čekali), je zcela v pořádku, a dokonce rozumné, svěřit to odborníkovi.

Profesionální webdesignér nebo specialista na digitální marketing vám nejen pomůže s nastavením API klíče, ale také zajistí, že je mapa optimálně integrovaná do vašeho webu z hlediska uživatelského zážitku i SEO. Navíc se postará o správné zabezpečení klíče, aby nedocházelo k jeho zneužití. Pokud se vám zdá, že je nastavení příliš složité, nebo se problém stále nedaří vyřešit, neváhejte se obrátit na někoho, kdo se v tom vyzná.

Závěr

Šedá mapa s nápisem "Jen pro vývojové účely" je běžný problém, který má ale jasné řešení. S trochou trpělivosti a naším návodem můžete svůj web rychle vrátit do plné funkčnosti a zbavit se nevzhledného prvku. Pokud byste si však s tímto, nebo jakýmkoli jiným problémem spojeným s vaším webem nevěděli rady, neváhejte se obrátit na Vítka Hoška z Českých Budějovic. Na jasnyweb.cz vám rád pomůže s webdesignem, digitálním marketingem a zajistí, že váš web bude vždy fungovat, jak má.

Máte dotaz k vlastnímu webu? Napište mi a ozvu se vám.