Jak získat a nastavit Google Maps API klíč pro e-shop

Mít na e-shopu interaktivní mapu od Google se hodí. Zákazníci tak snáze naleznou cestu k vaší prodejně či provozovně, ať už jedou autem, MHD nebo jdou pěšky. Aby však byla vaše interaktivní Google mapka funkční a ukazovala tak přesnou adresu, musíte ji ověřit pomocí tzv. Google API klíče. V textu níže vás krok za krokem provedeme procesem, jak jej získat a jak s jeho pomocí Google Maps na vašem e-shopu zprovoznit. Návod je vhodný pro provozovatele, kteří Google Maps nikdy nevyužívali, i pro ty z vás, kterým z nějakého důvodu Google API klíč vypršel či nefunguje. V obou případech doporučujeme začít od prvního bodu návodu.

POSTUP

1. Přihlášení do Google Cloud
2. Nastavení platby
3. Zapnutí Google Maps API
4. Získání API klíče
5. Vložení API klíče do aplikace EasyShop
6. Potvrzení, že vše správně funguje

1. Přihlášení do Google Cloud

Ze všeho nejdříve se potřebujete přihlásit do platformy Google Cloud, přes kterou se API klíče spravují. Běžte na adresu https://cloud.google.com/ a klikněte na modré tlačítko „Get started for free“ v pravém horním rohu. Zde se další postup liší v závislost na to, jestli již máte Google účet a jestli jste k němu v prohlížeči přihlášení. Google Cloud vás po kliknutí na ono modré tlačítko nasměruje na přihlášení k existujícímu účtu Google, nebo k vytvoření nového. Ať už budete tvořit nový účet, nebo se jen přihlásíte, skončíte na obrazovce s nastavením:

Zde zaškrtněte „I have read and agree to the Google Cloud Platform Free Trial Tearms of Service“ a klikněte na modré tlačítko „CONTINUE“.

TIP: Nevyužívejte svůj osobní Google účet pro firemní účely. Bezpečnější je vytvořit nový a využívat ho pouze pro služby či platby spojené s vaší firmou.

2. Nastavení platby

Na další obrazovce musíte vytvořit platební profil své firmy (pokud používáte na svém Google účtu Google Pay, budete mít vše předvyplněné). Vyplňte všechna pole svými firemními fakturačními údaji.

Pak už stačí jen vyplnit kreditní kartu. Nemějte strach, platit nic nebudete. Google Maps API má velmi štědře nastavené limity pro využívání zdarma – pokud bude mapa lidem zobrazena každý měsíc méně jak +- 28 000 krát, neplatíte nic. A pokud byste přece jen přesáhli limit, Google vám automaticky nic z karty nestrhne, zašle jen mail upozorňující na vyplýtvání kreditu zdarma a mapu dočasně (do konce měsíce) zablokuje.

Po zadání platebních informací vše potvrďte kliknutím na „STAR MY FREE TRIAL“. Poté se již konečně dostaneme dovnitř Google Cloud platformy.

3. Zapnutí Google Maps API

Uvnitř Google Cloud platform klikněte na hamburger menu v levém horním rohu. Rozbalí se vám nabídka, na které vyberete „Marketplace“.

Do velkého pole „Search for solutions“ napište „google maps“ a potvrďte enterem:

Mezi výsledky tohoto vyhledávání uvidíte „Maps JavaScript API“ a „Maps Embed API“. Postupně budete muset kliknout na oba tyto výsledky. Nejdříve klikněte na „Maps JavaScript API“:

Klikněte na modré tlačítko „Enable“. Poté stejným způsobem zopakujte aktivaci „Maps Embed API“.

4. Získání API klíče

Blížíme se do cílové rovinky! V levém horním rohu opět klikněte na hamburger menu. Tentokrát však najeďte kurzorem na „API & Services“, čímž rozbalíte navazující nabídku. V té klikněte na „Credentials“.

V horní liště najeďte na modrý nápis „+ CREATE CREDENTIALS“ a vyberte „API Key“.

Dostanete se do okna s vygenerovaným API klíčem. To však není vše! Ještě si musíte pojistit, že bude klíč využíván jen na vašem webu a jen pro účely Google Maps. Klikněte na modrý nápis „RESTRICT KEY“. Dostanete se na stránku, na které se vytváří pravidla pro restrikce využití klíče. V sekci „Application restrictions“ vyberte „HTTP refferers“ a klikněte na tlačítko „ADD AN ITEM“ níže:

Objeví se vám kolonka „Referrer*“. Vepište do ní adresu webu, na kterém chcete mapy používat, a klikněte na „DONE“.

Dále užití klíče omezíme pouze na Google Maps API. V sekci „API restrictions“ vyberte radio button „Restrict key“ a klikněte na rozbalovací nabídku „Select APIs“.

Rozbalí se vám nabídka služeb Google API, ze kterých zaškrtněte „Maps JavaScript API“ a „Maps Embed API“.

Poté klikněte na modré tlačítko „SAVE”. Tím veškeré nastavování dokončíte a dostanete se na stránku se všemi vašimi klíči Google API:

Kliknutím na ikonku dvou stránek zkopírujte svůj API klíč a můžete ho tak snadno vložit do administrace EasyShopu:

5. Vložení API klíče do aplikace EasyShop

Nyní už zbývá jen vložit klíč do aplikace EasyShop. Místo se liší v případech EasyShopu 3.9 A EasyShopu 4.

5.1 Vložení klíče do aplikace EasyShop 3.9

Přihlaste se do administrace e-shopu. V levém menu klikněte na „Konfigurace” a poté „Parametry prodejny”. Poslední položka v této sekci je právě Google Maps API klíč. Vložte jej do input pole vlevo od textu a klikněte na modré tlačítko „Uložit nastavení”. Hotovo!

5.2 Vložení klíče do aplikace EasyShop 4

Přihlaste se do administrace e-shopu. V levém menu klikněte na „Nastavení” a poté „Parametry prodejny”. Scrollujte dolů až k „SEO a marketing” a klikněte na „GOOGLE”.

Poslední položka v této sekci je právě Google Maps API klíč. Vložte jej do input pole vpravo od textu:

Nakonec uložte klíč kliknutím na oranžové tlačítko „Uložit” vpravo nahoře. Hotovo!

6. Potvrzení, že vše správně funguje

Funkčnosti API klíče ověříte snadno na jakékoliv stránce, na které v e-shopu využíváte Googe Maps (obvykle stránka s kontakty nebo s mapou prodejen). Pokud jste klíč nezadali vůbec nebo je v neplatném tvaru, uvidíte jednu z těchto dvou chybových hlášek:

Pokud jste klíč správně nastavili a vložili do administrace, uvidíte mapku se zvýrazněním v bodě, kde se nachází vaše prodejna/provozovna:

To je vše! Nyní máte na svém e-shopu funkční integraci se službou Google Maps. Je v návodu něco nedostatečně vysvětlené? Máte další dotazy ke službě Google Maps? Napište na info@itstudio.cz.