Google Mapy – Jak vytvořit API klíč a zprovoznit interaktivní mapy od Google

| Petra Šmejdová
Google Mapy – Jak vytvořit API klíč a zprovoznit interaktivní mapy od Google

Pokud chcete na vašem webu pracovat s oblíbenou mapovou službou od Googlu, měli bystě vědět, že od teď budete muset udělat o krok navíc. A to získat tzv. API klíč. O jeho vložení se už postaráme my. 

Proč musíte udělat krok navíc?

Společnost Google jako dodavatel třetí strany pozměnila licenční podmínky využívání služby Google Mapy přes tzv. API klíč. Změna spočívá v omezení počtu zobrazení map v rámci jednoho účtu - dosud mapy na webech z naší dílny fungovaly přes náš PUX účet.

Abychom mohli mapy na vašich stránkách co nejdříve zprovoznit, bude nezbytné, abyste si službu zaregistrovali na vlastní účet u Google. Připravili jsme proto tento jednoduchý návod s postupem, jak potřebný API klíč vytvořit a znovu zprovoznit interaktivní mapu.


Nově je bezplatné používání služeb Google Mapy omezené a v režimu "Free Trial" - tedy ve zkušebním provozu - nabízí 200$ kredit pro používání jejich služeb zdarma na každý měsíc.

Je důležité vědět, že tento kredit v měsíci můžete vyčerpat i dříve v závislosti na tom, jak frekventovanou návštěvnost na vašich stránkách máte. Více se dozvíte v návodu, v bodu 6 a na stránkách Google. Pro takový případ máme v záloze řešení pomocí OpenStreetMap.cz, bezplatné možnosti zobrazování interaktivní mapy na webových stránkách.

V případě, že jste si zvolili službu Google Mapy, pro správné vytvoření API klíče postupujte podle následujicího návodu níže.

Jak vytvořit API klíč

1) Přes odkaz https://console.cloud.google.com/ se přihlaste do vašeho účtu od Google, klikněte na "Select a project" a následně na tlačítko "NEW PROJECT", viz screenshot níže:

Vytvořte si nový projekt s názvem vašeho webu, viz:



2) Jakmile bude projekt založen, poznáte to díky notifikační ikonce vpravo, viz:



Přejděte na svůj projekt, klikněte vlevo na "Navigation menu", vyberte "APIs and Services" a poté klikněte na tlačítko "Enable APIS and Services":



Z nabídky zvolte "Maps JavaScript API":



Na následující stránce s API klikněte na "Enable" a chvíli vyčkejte, dokud se služba Maps JavaScript API neaktivuje.


3) Jakmile bude služba Maps JavaScript API aktivní, měli byste vidět stránku, viz obrázek níže:



Vyberte záložku "Credentials" a kliknutím na modré tlačítko si vytvořte API Key, viz:



4) API klíč se vytvoří, následně v novém okně klikněte na "Restrict Key". Na této stránce nastavujeme omezení API klíče, aby byl aktivní pouze na konkrétních doménách.

Dole v "Key restrictions" zvolte "HTTP referrers (web sites)" a přidejte domény vašich stránek s hvězdičkou na konci. Nastavení může vypadat následovně:



Dále v záložce "API restrictions" a zvolte z výběru službu "Maps JavaScript API":



Provedené změny uložte modrým tlačítkem "Save".


5) Po uložení budete navráceni na stránku Maps JavaScript API, nyní zvolte záložku "Quotas".



V této záložce vpravo dole můžete vidět seznam kvót. Nyní je kvóta omezena na jedno zobrazení mapy za den, viz „Map loads per day … 1“.

Po kliknutí na tužtičku vpravo se vám zobrazí nové okno s možností změnit limit dané kvóty:



Klikněte na odkaz „enable billing for this project“, v novém okně na tlačítko „Link a billing account“ a následně na „Create billing account“, viz:



Následně si založte fakturační účet dle postupu na stránkách Google, který se sám spustí po kliknutí na „Create billing account“.

Po založení "billing account" je zapotřebí potvrdit Váš e-mail.

Prvních 12 měsíců je využívání služeb Google zdarma, nebo dokud nevyčerpáte kredit 200 $.
Více se dozvíte na speciální stránce, kde jsou popsané změny cenových a fakturačních pdomínek ze strany společnosti Google. 

6) Po nastavení Billing accountu přejděte opět do záložy "Quotas" (jako v bodě 5) a klikněte na tužtičku vpravo u "Map loads per day".

Zrušte nastavení "Unlimited" a nastavte omezení na 900 zobrazení mapy za den:



Tohle nastavení by mělo stačit až na 28 000 bezplatných načítání map každý měsíc. Samozřejmě záleží na tom, jak frekventovanou návštěvnost na vašich stránkách máte.


7) Billing account (fakturační účet) máte založený spolu s API klíčem. Přejděte opět do záložky "Credentials" viz obrázek níže:



Zkopírujte vytvořený API klíč ve sloupci "Key":



Klíč nám zašlete a my provedeme potřebné změny na vašich stránkách v Kenticu.

Jakmile budou změny z naší strany hotové, pak trvá 5-15 minut, než se změny na webu projeví a Google Mapa se zprovozní.


Pokud Google Mapa na Vašem webu využívá také vyhledávání míst např. zadáním města nebo PSČ, aktivujte také službu "Places API for Web". Na odkaze https://console.cloud.google.com/apis/library?folder=&organizationId s výběrem služeb API zvolte službu "Places API" viz obrázek níže:



Kliknutím na "Enable" službu aktivujete:




V případě nejasností kolem návodu na nastavení API klíče, nás prosím kontaktujte na našem HelpDesku (helpdesk@puxdesign.cz).


Váš PUX tým

Buďte v obraze ve světě webů a e-shopů
Přihlaste se k odběru našeho newsletteru

Každé 3 měsíce vám pošleme oběžník s horkými informacemi ze světa vývoje a webdesignu, novinkami v e-commerce sféře i akčními nabídkami pro ještě lepší web.
Přihlášením k newsletteru souhlasíte s našimi zásadami zpracování osobních údajů.

Umíme vše, co je pro váš projekt potřeba

Nebo vás nejprve zajímá, jak to u nás vypadá?

Zákulisní informace i to, na čem zrovna pracujeme, sdílíme na sociálních sítích. Sledujte nás.