Problem z mapą Google – nie ładuje się na stronie

Dlaczego mapa Google nie ładuje się na stronie WordPress?

W miejscu mapy widzisz pusty obszar albo komunikat o błędzie? Najpierw ustal, jak mapa została dodana. Od tego zależy, co sprawdzić:

• Kod iframe z opcji „Udostępnij → Umieść mapę” w Google Maps nie wymaga wpisania własnego klucza API. Sprawdź, czy kod nie został usunięty przez edytor, czy ramka ma wymiary i czy nie blokuje jej przeglądarka lub mechanizm zgód.
• Maps Embed API to inne rozwiązanie w ramce iframe: adres zawiera /maps/embed/v1/ i wymaga klucza, włączonego API oraz rozliczeń w projekcie.
• Mapa tworzona przez Maps JavaScript API, np. przez wtyczkę, wymaga odpowiedniego klucza, API i rozliczeń. Może też zależeć od innych skryptów strony.

W WordPressie poszukaj mapy w treści strony, bloku HTML, kreatorze lub ustawieniach wtyczki. W przeglądarce kliknij prawym przyciskiem miejsce mapy i wybierz „Zbadaj”, aby sprawdzić element i jego adres. Instrukcję pobrania kodu znajdziesz w pomocy Google Maps.

Sprawdzenie klucza API i konfiguracji mapy

Jeśli korzystasz z Google Maps Platform, otwórz Google Cloud Console i wybierz projekt powiązany z używanym kluczem. W APIs & Services → Credentials znajdź klucz, a w ustawieniach wtyczki sprawdź, czy używa właściwego projektu i nie zawiera przypadkowych spacji.

W projekcie i w ograniczeniach klucza dopuść tylko usługi faktycznie wykorzystywane przez integrację: zwykle Maps JavaScript API dla mapy JavaScript albo Maps Embed API dla adresu /maps/embed/v1/. Dodatkowe usługi, takie jak Places czy Geocoding, włączaj tylko wtedy, gdy dana funkcja ich potrzebuje. Sama obecność klucza nie oznacza, że API jest włączone lub dozwolone.

Klucz używany w przeglądarce jest widoczny dla odwiedzających; zabezpiecz go ograniczeniami witryn i API. Nie publikuj pełnego klucza w zgłoszeniach pomocy ani na zrzutach ekranu. Jeśli podejrzewasz nadużycie, sprawdź użycie i zastosuj procedurę wymiany klucza według zaleceń Google.

Limity i rozliczenia Google Maps

W Google Cloud sprawdź w projekcie stan konta rozliczeniowego, metodę płatności, użycie i limity właściwego API. Produkty Google Maps Platform wymagają aktywnych rozliczeń nawet wtedy, gdy bieżące użycie mieści się w bezpłatnym progu. Maps Embed API jest produktem bez opłat za użycie; inne usługi mogą być rozliczane inaczej.

Od 1 marca 2025 r. miesięczny kredyt 200 USD zastąpiono bezpłatnymi progami dla poszczególnych usług rozliczeniowych (SKU). Przekroczenie progu bezpłatnego użycia nie musi zatrzymać mapy: może oznaczać naliczanie opłat. Z kolei osiągnięcie ustawionego limitu użycia może blokować kolejne żądania. Sprawdź aktualny cennik i zasady rozliczeń dla swojego konta, zanim zmienisz limit.

Ustaw alerty budżetowe, ale nie traktuj ich jako twardego limitu wydatków. Jeśli potrzebujesz ograniczyć liczbę żądań, sprawdź dostępne limity API i wpływ ich ustawienia na działanie strony. Mapa statyczna lub opóźnione ładowanie mogą ograniczyć użycie, ale koszt zależy od konkretnej usługi i sposobu wdrożenia.

HTTPS i blokowane zasoby

Otwórz stronę przez HTTPS i w narzędziach deweloperskich sprawdź zakładki Console i Network. Przeglądarka może blokować skrypt lub ramkę pobieraną przez HTTP na stronie HTTPS (mixed content). Sprawdź też komunikaty o polityce Content Security Policy (CSP), która może blokować zasoby Google.

Popraw adres zasobu u jego źródła: w ustawieniach wtyczki, bloku lub kodzie motywu. Jeżeli cała witryna działa przez HTTP, uzgodnij z hostingiem wdrożenie certyfikatu i przekierowania; przed zmianą adresów WordPress wykonaj kopię i sprawdź procedurę dla swojego środowiska. Nie zmieniaj hurtowo danych w bazie bez kopii i sprawdzonej metody.

Konflikty JavaScript

W konsoli odśwież stronę i poszukaj błędu odnoszącego się do mapy lub skryptu, który ją inicjuje. W zakładce Network sprawdź, czy żądania do Google i pliki wtyczki nie są blokowane lub zakończone błędem. Sam status HTTP 200 nie gwarantuje poprawnej autoryzacji; przeczytaj też komunikaty w konsoli.

Jeśli problem pojawił się po aktualizacji albo włączeniu opóźniania skryptów, odtwórz go na kopii testowej. Tam wyłączaj podejrzane ustawienia lub wtyczki pojedynczo i testuj po każdej zmianie. Zwróć uwagę na kolejność inicjalizacji i wielokrotne ładowanie Maps JavaScript API. Nie wyłączaj wszystkich wtyczek ani nie zmieniaj motywu na działającej stronie bez oceny skutków i kopii.

Ograniczenia domeny i bezpieczeństwo klucza

Dla klucza używanego w przeglądarce ustaw ograniczenie Websites / HTTP referrers oraz ograniczenie do wymaganych API. Dodaj dokładne warianty witryny, z których mapa jest uruchamiana, np. https://twojadomena.pl/* i osobno https://www.twojadomena.pl/*, jeśli oba są używane. Nie dodawaj niepotrzebnych subdomen. Po zapisaniu ustawień sprawdź stronę ponownie.

Przy ograniczeniach według witryny przeglądarka musi wysłać informację o stronie odsyłającej. Polityka no-referrer może ją ukryć. Dla własnego iframe Maps Embed API Google opisuje użycie referrerpolicy="strict-origin-when-cross-origin", które przekazuje domenę bez ścieżki; skonfiguruj ograniczenia tak, aby pasowały do przesyłanego adresu. Szczegóły i przykłady znajdziesz w dokumentacji osadzania mapy.

Żądania wykonywane po stronie serwera mogą wymagać osobnego klucza z ograniczeniem adresów IP. Nie zamieniaj w ciemno ograniczenia klucza przeglądarkowego na IP ani nie usuwaj wszystkich ograniczeń, aby mapa zaczęła działać.

Błędy w konsoli deweloperskiej

Otwórz narzędzia deweloperskie (F12 lub „Zbadaj”), wybierz Console i odśwież stronę. Poniższe komunikaty dotyczą Maps JavaScript API:

• RefererNotAllowedMapError – sprawdź adres strony i ograniczenia witryn klucza.
• ApiNotActivatedMapError – sprawdź, czy Maps JavaScript API jest włączone w projekcie klucza.
• ApiTargetBlockedMapError – sprawdź ograniczenia API przypisane do klucza.
• InvalidKeyMapError lub MissingKeyMapError – sprawdź klucz i sposób jego przekazania.
• BillingNotEnabledMapError – sprawdź konto rozliczeniowe projektu.
• OverQuotaMapError – sprawdź limity użycia i szczegóły błędu; nie zakładaj, że wystarczy dodać kartę płatniczą.

Pełną listę i znaczenie komunikatów podaje dokumentacja błędów Maps JavaScript API. Dla Maps Embed API sprawdź również komunikat w ramce i status żądania: błędy Maps Embed API. Przed przesłaniem diagnostyki usuń z niej klucze i inne dane wrażliwe.

Wtyczki, zgody i opóźnione ładowanie

Sprawdź ustawienia wtyczki mapowej i wtyczki optymalizacyjnej. Minifikacja lub opóźnienie JavaScript może zmienić kolejność inicjalizacji. Testowo wyklucz odpowiedni skrypt z optymalizacji na kopii testowej, a po zmianie wyczyść właściwe warstwy cache i sprawdź wynik w prywatnym oknie.

Jeśli mapa pojawia się dopiero po wyrażeniu zgody, sprawdź działanie banera: zarówno po akceptacji, jak i odmowie. Nie obchodź mechanizmu zgód wyłącznie po to, by mapa się wyświetlała. Dla użytkownika, który nie uruchomi mapy, warto udostępnić adres firmy i zwykły link do wskazówek dojazdu. Opóźnione ładowanie iframe może poprawić wydajność, ale po zmianie sprawdź widok mobilny i działanie zgód.

Alternatywy dla Google Maps

Jeżeli potrzebujesz tylko wskazać lokalizację, może wystarczyć adres i link do mapy. Inną opcją jest OpenStreetMap z biblioteką Leaflet. Dane OpenStreetMap są otwarte, ale usługa dostarczania kafelków ma ograniczoną pojemność i własne zasady. Zapewnij widoczne oznaczenie autorstwa i sprawdź zasady serwera kafelków albo warunki wybranego dostawcy. Dostawca kafelków może wymagać klucza lub pobierać opłaty.

Przed migracją porównaj również koszty, warunki użycia i potrzebne funkcje innych dostawców, np. Mapbox lub HERE. Sprawdź działanie na telefonie i prawidłowość adresu przed podmianą mapy.

Podsumowanie: jak naprawić mapę Google

1. Rozpoznaj sposób osadzenia mapy: kod udostępniania, Embed API czy JavaScript API.
2. Odczytaj komunikat w mapie, konsoli i zakładce Network; sprawdź wymiary ramki i mechanizm zgód.
3. Jeśli używasz API, zweryfikuj projekt, klucz, włączoną usługę, ograniczenia, rozliczenia i limity.
4. Konflikty wtyczek i optymalizacji sprawdzaj pojedynczo na kopii testowej.
5. Po poprawce wyczyść odpowiedni cache i sprawdź mapę na komputerze i telefonie, także w prywatnym oknie.