Kolejny wpis, który być może nie powstał by bez Was – a konkretnie prośby o „indywidualna pomoc” jaka trafiła do mnie za pomocą formularza kontaktowego. Sprawa niby błaha – na stronie firmowej, jest podstrona kontakt, a na niej mapka Google z zaznaczoną lokalizacją firmy. A przynajmniej tak było, bo klient zwrócił uwagę firmie, że coś chyba nie tak, bo mu się ich mapa nie wyświetla…

Google Maps API

Pomogłem chętnie, zwłaszcza że jakiś czas temu sam na stronach którymi się opiekuję sprawdzałem, czy oby na pewno wszędzie gdzie są wykorzystywane Mapy Google jest ustawiony odpowiedni i indywidualny klucz API.

Od 22 czerwca 2016 wszystkie połączenia/odwołania do Google Maps API wymagają klucza API, inaczej zamiast mapy zobaczycie np. taki komunikat:

google-maps_www-error_no-api-keys

Oops! Something went wrong.

This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Dalsze informacje przynosi zerknięcie do konsoli JavaScript w przeglądarce (narzędzia dla deweloperów):

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Oczywiście może się zdarzyć, że np. jakaś wtyczka do WordPressa będzie działać bez ustawiania przez Was klucza API – deweloper może umieścić w niej własny klucz, z tym, że bezpłatny limit to 25 000 żądań/zapytań API dziennie. Niby dużo, ale przy bardziej popularnych rozszerzeniach może się okazać, że będzie to mało, a niekoniecznie deweloper/wydawca wtyczki będzie chciał dopłacać do dalszych żądań/zapytań.

Twój bezpłatny klucz Google Maps API

Na szczęście w kilku prostych krokach możecie wygenerować własny klucz API dla Map Google, dzięki czemu będziecie mieć 25 000 żądań API dziennie tylko dla siebie.

Zaczynamy od założenia konta w usłudze Google APIs – opcja bezpłatna, można wykorzystać już posiadane konto Google (Gmail).

Teraz wystarczy utworzyć nowy projekt – np. nazwa naszej strony:

google-apis_api-manager_new-project01

Następnie w menu po lewej stronie wybieramy „library”:

google-apis_api-manager_library01

I w sekcji „Google Maps APIs” wchodzimy w każdą z poniższych pozycji i wybieramy „enable” (które w tym momencie zmieni się na „disable”):

  • Google Maps JavaScript API
  • Google Static Maps API

google-apis_api-manager_google-maps-javascrip-api01

Od razu warto też zastanowić się nad aktywacją kolejnych pozycji, które mogą okazać się przydatne/niezbędne – zwłaszcza przy bardziej rozbudowanych mapach:

  • Google Maps Roads API
  • Google Street View Image API
  • Google Maps Embed API
  • Google Places API Web Service
  • Google Maps Geocoding API
  • Google Maps Directions API
  • Google Maps Distance Matrix API
  • Google Maps Geolocation API
  • Google Maps Time Zone API

Uwierzytelnienie, czyli Twój klucz API

W tym momencie możemy wygenerować klucz API dla aktywowanych przed chwila opcji – w menu po lewej stronie wybieramy kolejno „credentials”, a następnie:

  • Credentials: Create credentials -> API key

google-apis_api-manager_credentials_create_api-key01

Następnie „browser key”:

google-apis_api-manager_credentials_create_api-key_browser-key01

Jako nazwę ponownie możecie wpisać coś co pozwoli Wam rozróżniać klucze w przyszłości – np. nazwę serwisu:

google-apis_api-manager_credentials_create_api-key_browser-key02

Od razu – ew. po testach – sugeruje zablokować możliwość wykorzystania klucza API do naszej domeny/konkretnych adresów, gdyż klucz łatwo można pozyskać ze źródła strony, i jeśli tego nie zrobicie, to może się zdarzyć, że ktoś skorzysta z Waszego klucza, i wykorzysta Wasz limit:

Accept requests from these HTTP referrers (web sites) (Optional)

Use asterisks for wildcards. If you leave this blank, requests will be accepted from any referrer. Be sure to add referrers before using this key in production.

Możecie tu wpisać konkretny adres, lub domenę, np.:

https://Webinsider.pl/kontakt
https://Webinsider.pl/*

Jeśli pomylicie się w tym kroku, i zablokujecie dostęp sami dla siebie, to w konsoli JavaScript traficie na błąd tego typu:

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://webinsider.pl/kontakt/

Na szczęście wystarczy skorygować powyższe ustawienia (pamiętajcie, że ustawienia mogą wejść „w życie” po kilku minutach, wg Google nie powinno to trwać dłużej niż 5 minut)

Po zatwierdzeniu/zapisaniu ustawień pojawi się klucz API, który teraz wystarczy wykorzystać na swojej stronie:

google-apis_api-manager_credentials_create_api-key_browser-key03

 

(!) Zgłoś błąd na stronie
Pomogłem? To może postawisz mi wirtualną kawę?
LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly
Wdrożenie Omnibusa w sklepie na WooCommerce
Jak (legalnie) latać dronem w Kategorii Otwartej
Patryk