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…
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 lub podobny:
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:
Następnie w menu po lewej stronie wybieramy „biblioteka” (library):
I w sekcji „Google Maps APIs” wchodzimy w każdą z poniższych pozycji i wybieramy „włącz” (enable) (które w tym momencie zmieni się na „wyłącz” [disable] ):
- Google Maps JavaScript API
- Google Static Maps API
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 „dane logowania” (credentials), a następnie:
- Dane logowania: Dane logowania -> API key (Credentials: Create credentials -> API key)
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://twoja_domen.pl/kontakt
https://twoja_domena.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://twoja_domena.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.
