Šedá Google mapa na webu: jak odstranit nápis „Jen pro vývojové účely“

Zmizela vám z webu funkční mapa a zbyla jen šedá plocha s varovným nápisem? Zjistěte, co tento problém způsobuje a jak ho v několika krocích rychle vyřešit.

Stojíte před monitorem, prohlížíte si své webové stránky a místo přehledné mapy s polohou vaší provozovny vidíte jen smutnou šedou plochu. Přes ni se agresivně táhne nápis „Jen pro vývojové účely“ (v angličtině „For development purposes only“) a uprostřed na vás svítí chybová hláška o tom, že mapa se nenačetla správně.

Pro majitele malé firmy je to nepříjemná situace. Mapa není jen designový prvek, je to klíčový nástroj, který pomáhá vašim zákazníkům najít cestu k vašim dveřím. Pokud nefunguje, působí web zanedbaně a vy můžete přicházet o tržby. Dobrou zprávou je, že váš web není „rozbitý“ v pravém slova smyslu. Jde o administrativní zádrhel u společnosti Google, který společně v tomto článku vyřešíme.

Proč k tomu dochází?

Možná si pamatujete časy, kdy stačilo zkopírovat kousek kódu z Google Map, vložit ho na web a vše fungovalo roky bez jediného zásahu. Tyto časy jsou bohužel pryč. V roce 2018 Google radikálně změnil pravidla své služby Google Maps Platform.

Hlavní příčinou, proč nefunguje mapa na webu a zobrazuje se šedě, je fakt, že Google vyžaduje pro každé zobrazení mapy takzvaný API klíč, který je propojený s platným platebním profilem. Pokud váš web používá starý způsob vložení mapy bez tohoto klíče, nebo pokud je váš klíč neaktivní či chybně nastavený, Google mapu úmyslně znehodnotí tímto šedým filtrem a vodoznakem.

Zjednodušeně řečeno: Google chce mít přehled o tom, kdo jeho mapy používá, a chce mít v systému vaši platební kartu, i když se pravděpodobně do limitu pro placení nikdy nevejdete. Google totiž poskytuje měsíční kredit v hodnotě 200 dolarů zdarma, což pro drtivou většinu malých firem a živnostníků v Českých Budějovicích i jinde bohatě stačí na tisíce zobrazení mapy měsíčně. Bez zadané karty a aktivovaného projektu vám ale mapu zkrátka neukáže.

Jak to opravit krok za krokem

Pokud u své mapy vidíte nápis Google mapy chyba jen pro vývojové účely, nepanikařte. Následující postup vás provede procesem nápravy. Budete k tomu potřebovat přístup ke svému Google účtu (ideálně firemnímu Gmailu) a platební kartu.

1. Vstupte do Google Cloud Console: Přejděte na stránky Google Cloud Platform. Pokud zde ještě nemáte projekt, budete vyzváni k jeho vytvoření. Pojmenujte ho například „Web – Moje Firma“.
2. Nastavení fakturace (Billing): Toto je krok, kterého se klienti nejvíce obávají, ale je nezbytný. V levém menu najděte položku „Billing“ (Fakturace) a propojte svůj projekt s platební kartou. Jak jsem zmínil, Google vám dává každý měsíc kredit 200 USD. Dokud návštěvnost vaší mapy nepřekročí zhruba 25 000 zobrazení za měsíc, nebudete platit ani korunu.
3. Aktivace knihovny API: V horním vyhledávacím panelu vyhledejte „Maps JavaScript API“ a klikněte na tlačítko „Enable“ (Aktivovat). Tím řeknete Googlu, že v rámci svého projektu chcete využívat právě mapy pro webové stránky.
4. Vytvoření API klíče: V sekci „APIs & Services“ najděte záložku „Credentials“ (Pověření). Zde klikněte na „Create Credentials“ a vyberte „API Key“. Právě jste vygenerovali unikátní řetězec znaků, který vložíte do svého webu.
5. Zabezpečení klíče (Kritický krok!): Nikdy nenechávejte API klíč bez omezení. Klikněte na editaci klíče a v sekci „Application restrictions“ zvolte „HTTP referrers“. Zde přidejte adresu svého webu (např. https://vase-domena.cz/*). Tím zabráníte tomu, aby váš klíč (a váš kredit) ukradl někdo cizí a používal ho na svém webu.
6. Vložení mapy na web: Pokud používáte WordPress a plugin typu Elementor nebo Divi, stačí tento klíč vložit do nastavení daného pluginu. Pokud máte web na míru, je potřeba upravit kód, kterým se mapa volá. Vložení mapy na web s novým klíčem okamžitě odstraní šedý nápis.

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

I když se výše uvedený návod může zdát přímočarý, rozhraní Google Cloud Console je robustní nástroj určený primárně pro vývojáře. Pro někoho, kdo se soustředí na své podnikání a neřeší technické detaily webu, může být toto prostředí matoucí a frustrující.

Existuje několik situací, kdy se vyplatí kontaktovat profesionála:

• Bezpečnostní obavy: Pokud si nejste jistí, jak správně nastavit omezení klíče, riskujete, že se váš účet stane terčem zneužití a na kartě se objeví nečekané výdaje.
• Technická složitost: Váš web může používat zastaralou šablonu nebo pluginy, které s novým API klíčem nespolupracují správně a vyžadují zásah do kódu.
• Hledání alternativ: Google Mapy nejsou jedinou možností. Pro české firmy je často mnohem lepším a elegantnějším řešením implementace Mapy.cz od Seznamu. Jsou pro české uživatele přehlednější, často zcela zdarma i bez platební karty a jejich nasazení je pro zkušeného webdesignéra otázkou chvíle.
• Časová úspora: Místo hodin strávených v dokumentaci Googlu se můžete věnovat svým zákazníkům, zatímco odborník problém vyřeší za pár desítek minut.

Vědět, jak nastavit Google Maps API klíč, je jedna věc, ale zajistit, aby celá sekce s kontakty na webu působila profesionálně a byla optimalizovaná pro mobilní telefony, je věc druhá. Profesionální dohled vám zajistí, že mapa bude fungovat dnes, zítra i za rok.

Závěr

Šedá mapa s nápisem „Jen pro vývojové účely“ není neřešitelný problém, ale jasné znamení, že váš web potřebuje trochu technické péče v souladu s aktuálními pravidly Googlu. Pokud si na nastavení API klíče netroufáte nebo byste raději na web nasadili přehledné Mapy.cz, rád vám s tím pomůžu.

Nenechte své zákazníky bloudit a dejte mi vědět na jasnyweb.cz – společně vaši mapu i celý web vyladíme tak, aby vám dělal radost a přiváděl nové klienty.