Google Maps na stornie nie działa

Jeżeli na Twojej stronie zamiast mapy wisi komunikat “Ups. This page can’t load Google Maps correctly.” ten artykuł jest dla Ciebie.

Nie do końca jest to błąd, a przynajmniej osoba która robiła dla ciebie stronę nie jest niczemu winna. Po prostu Google zmieniło politykę i każdy kto chce wstawić mapę na swoją stornę musi posiadać klucz API nadawany przez Google i wskazać ten klucz w adresie URL mapy w swojej witrynie.

Co zatem musisz zrobić? Kliknij tutaj aby przejść do storny “Interfejsy API i usługi” Google Cloud. Zostaniesz poproszony o zaakceptowanie warunków korzystania z usługi. Następnie w zakładce “Dane logowania” kliknij przycisk “Utwórz dane logowania” i z listy wybierz opcję “Klucz API”. Klucz zostanie utowrzony i pojawi się w wyskakującym okienku.

Następnie ten właśnie klucz musisz dołączyć do adresu URL ramki wczytującej widok mapy na twojej stronie. Niestety nie ma tu reguły — czasami trzeba będzie to zrobić w panelu zarządzania stroną (jeżeli korzytasz z systemu WordPress prawdopodobnie w konfiguracji odpowiedniego pluginu), innym razem bezpośredio w kodzie HTML.

Jeżeli posiadasz podstawową wiedzę i operujesz bezpośredio na kodzie strony, szukaj elementu “iframe”, który w atrybucie “src” będzie posiadał adres URL zaczynający się w następujący sposób:

https://www.google.com/maps/embed/v1/undefined

Pełny element, którego szukamy wygląda mniej-więcej tak:

<iframe width=”600" height=”450" frameborder=”0" style=”border:0"
src=”https://www.google.com/maps/embed/v1/undefined?origin=...&q=...&destination=...&center=...&zoom=...&key=KLUCZ_API" allowfullscreen></iframe>

Zwróć uwagę na fragment “&key=KLUCZ_API”. Zamiast “KLUCZ_API” wstaw własny klucz API wygenerowany w Google Cloud. Jeżeli twoja ramka nie posiada w adresie takiego fragmentu, zwyczajnie dodaj go na samym końcu.

Jeżeli zastanawiasz się jak dostać się do kodów źródłowych twojej strony, zwykle zrobisz to za pomocą protokołu FTP korzystając z aplikacji Filezilla. Musisz jednak posiadać dane dostępowe — zwykle wystarczy ci adres serwera, nazwę użytkownika i hasło, gdyż pozostałe dane konieczne do nawiązania połączenia będą ustawione domyślnie. Dane te otrzymujemy od dostawcy hostingu w momencie uruchomienia usługi — często w formie wiadomości e-mail.

Program Filezilla zainstalujesz pobierając go uprzednio ze strony: https://filezilla-project.org/. Następnie uzupełnij pola znajdujące się w belce widocznej na górze programu. Będą to odpowiednio: adres serwera, nazwa użytkownika, hasło i port. Pole port zostaw pustę — jeżeli twój dostawca używa domyślnego portu 21 (lub 22 dla połączeń szyfrowanych), powinieneś uzyskań połączenie. W innym przypadku musisz poprosić o pomoc swoję firmę hostingową.

Gdy uzyszkasz dostęp do serwera FTP, sprawa ponownie nie jest oczywista. Musisz zlokalizować gdzie znajdują się pliki twojej strony, pobrać ten w którym znajduje się fragment kodu odpowiedzialny za wyświetlanie mapy, pobrać go na komputer, edytować wg. powyższych instrukcji i wysłać na serwer nadpisując poprzednią wersję. Może to brzmieć dość zawile, natomiast w przypadku prostych strony, często struktura plików wiele sugeruje. Np. źródło podstrony “Kontakt” może znajdować się w pliku “kontakt.html” lub “contact.html”. Wówczas możemy pobrać taki plik i sprawdzić czy znajdziemy w nim opisany wyżej element “iframe”. Jeżeli się uda—postępuj zgodnie ze wskazówkami zamieszczonymi powyżej.