Jak wstawić mapę Google na stronę WordPress, opisuje w sieci każdy: kopiujesz kod z „Udostępnij”, wklejasz w blok, gotowe. Trwa to trzy minuty i w tych trzech minutach da się popsuć trzy rzeczy: wysłać dane odwiedzających do Google bez ich zgody, dołożyć stronie kontaktu pół megabajta skryptów i osadzić mapę z samym adresem zamiast z pinezką firmy, przez co klient widzi ulicę, a nie Twoją nazwę, opinie i przycisk nawigacji. Mapę wstawiam na każdej stronie firmowej, którą robię, i ten tekst pokazuje, jak zrobić to tak, żeby przeszła audyt RODO, nie obniżyła wyniku szybkości i realnie prowadziła klienta pod drzwi.
Jak wstawić mapę Google na stronę WordPress?
Mapę Google wstawiasz na stronę WordPress bez wtyczki w pięciu krokach: znajdujesz swoją firmę w Google Maps, klikasz Udostępnij, wybierasz zakładkę Umieszczanie mapy, kopiujesz kod HTML i wklejasz go w edytorze WordPress do bloku Własny HTML na podstronie kontaktu. Kod z Google jest bezpłatny, nie wymaga klucza API i działa w każdym motywie.
To wersja minimalna i na pytanie, jak wstawić mapę Google na stronę WordPress, większość poradników odpowiada tylko tyle. Wersja, którą wdrażam u klientów, ma jeszcze trzy elementy: mapę osadzoną z profilu firmy, a nie z adresu, wczytywanie dopiero po zgodzie na cookies i atrybut opóźnionego ładowania, żeby mapa nie liczyła się do czasu wczytania strony. Każdy z nich opisuję niżej, razem z sytuacjami, w których wtyczka albo page builder mają sens, i tymi, w których są zbędnym ciężarem. Całość zajmuje kwadrans. Pod warunkiem, że firma jest już na mapie.
Zanim osadzisz mapę: czy Twoja firma jest na niej z nazwą
Wpisz nazwę firmy w Google Maps. Jeśli pojawia się pinezka z nazwą, zdjęciami, godzinami i opiniami, masz Profil Firmy w Google (dawniej Google Moja Firma) i mapę osadzasz z niego. Jeśli Google pokazuje tylko adres i szarą pinezkę, profilu nie ma, i najpierw trzeba go założyć. Bez tego osadzona mapa pokaże klientowi ulicę, a przycisk „Wyznacz trasę” poprowadzi go pod numer budynku, nie do Ciebie.
Profil zakładasz bezpłatnie na stronie Google dla firm: podajesz nazwę, kategorię, adres albo obszar działania, telefon i stronę www, a potem przechodzisz weryfikację, zwykle telefonem, krótkim filmem z lokalu albo kodem wysłanym pocztą. Trwa to od kilku dni do dwóch tygodni. Dopiero zweryfikowany profil pojawia się na mapie z nazwą. Robię to dla klientów jako dodatek do Pakietu Start za 150 zł, razem z uzupełnieniem kategorii, zdjęć i godzin, bo sam założony profil bez treści wygląda gorzej niż jego brak.
Metoda 1: kod z Google Maps w bloku Własny HTML
Najlepsza metoda dla firmy z jedną lokalizacją i moim zdaniem jedyna, jakiej taka firma potrzebuje. Jeśli ktoś pyta mnie, jak wstawić mapę Google na stronę WordPress bez wtyczki, odpowiadam tą listą. Kolejność:
- W Google Maps wyszukaj firmę po nazwie i kliknij jej pinezkę, tak żeby po lewej otworzyła się karta z nazwą, opiniami i godzinami. Jeśli szukasz po samym adresie, osadzisz punkt na ulicy, nie firmę.
- Kliknij Udostępnij, a w oknie przejdź do zakładki Umieszczanie mapy.
- Wybierz rozmiar. Zostaw średni, i tak zaraz zmienisz szerokość na procenty.
- Skopiuj kod HTML. Zaczyna się od znacznika iframe i ma w środku długi adres z parametrem pb.
- W WordPressie otwórz podstronę kontaktu, dodaj blok Własny HTML w miejscu, gdzie ma być mapa, i wklej kod. Zapisz, obejrzyj na telefonie.
Zanim zapiszesz, popraw w skopiowanym kodzie trzy rzeczy. Szerokość z liczby pikseli na 100 procent, żeby mapa nie wystawała z ekranu telefonu. Atrybut loading z wartością lazy, żeby przeglądarka wczytała mapę dopiero, gdy użytkownik do niej przewinie (nowsze kody z Google mają go już w środku, starsze nie). I atrybut title z opisem po polsku, bo czytnik ekranu bez niego oznajmi osobie niewidomej „ramka” i nic więcej, a od czerwca 2025 dostępność stron firmowych w UE przestała być dobrowolna. Gotowy szkielet, w którym podmieniasz tylko adres z parametrem pb na swój:
<iframe
src="https://www.google.com/maps/embed?pb=TU_WKLEJ_SWOJ_PARAMETR"
width="100%"
height="400"
style="border:0"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
title="Mapa dojazdu do firmy F-Tech Online w Gorzowie Wielkopolskim">
</iframe>Ten kod korzysta z usługi osadzania Google, która jest bezpłatna bez limitu wyświetleń i nie wymaga klucza ani konta rozliczeniowego. Dlatego przy jednej lokalizacji nie ma powodu sięgać po nic więcej.
Metoda 2: wtyczka, gdy masz kilka lokalizacji albo chcesz własne kolory
Wtyczka ma sens w trzech przypadkach: sieć punktów na jednej mapie z filtrowaniem, mapa w kolorach marki zamiast standardowej, albo wyszukiwarka najbliższego oddziału. Najczęściej używana to WP Go Maps (dawniej WP Google Maps), są też MapPress i Maps Widget. Wszystkie w wersjach zaawansowanych korzystają z Maps JavaScript API, a to oznacza klucz API i konto w Google Cloud z podpiętą kartą.
Tu ważna zmiana, bo większość polskich poradników nadal pisze o 200 dolarach darmowego limitu miesięcznie. Google zlikwidowało ten kredyt w marcu 2025 roku i zastąpiło go pulą bezpłatnych wywołań przyznawaną osobno dla każdej usługi. Typowa strona firmowa z mapą na podstronie kontaktu mieści się w tej puli z ogromnym zapasem, ale konto rozliczeniowe i tak trzeba założyć, a aktualne progi sprawdzić w cenniku Google Maps Platform, bo zmieniają się częściej niż ten artykuł.
Dwie zasady przy kluczu API, które oszczędzają pieniądze i nerwy. Po pierwsze, ogranicz klucz do swojej domeny w ustawieniach Google Cloud (ograniczenia aplikacji, strony odsyłające HTTP). Klucz bez ograniczeń, wklejony w kod strony, może skopiować każdy i wygenerować ruch, za który zapłacisz Ty. Po drugie, włącz tylko te interfejsy, których wtyczka wymaga, zwykle Maps JavaScript i ewentualnie Places. Włączanie wszystkiego „na zapas” to najkrótsza droga do niespodziewanej faktury.
Metoda 3: page builder i Moje Mapy
Elementor, Divi i Bricks mają własne widgety mapy. Przeciągasz, wpisujesz adres, gotowe. Widget Elementora w podstawowej wersji korzysta z tej samej bezpłatnej usługi osadzania co metoda pierwsza, więc nie wymaga klucza, ale osadza mapę z adresu, nie z profilu firmy: klient zobaczy pinezkę bez nazwy i bez opinii. Divi w module mapy wymaga klucza API. Jeśli strona już stoi na builderze, użyj jego widgetu dla wygody edycji, ale sprawdź, czy da się w nim wkleić własny kod osadzania z profilu; w Elementorze zrobisz to widgetem HTML zamiast widgetem mapy.
Moje Mapy Google to narzędzie do rysowania własnych map z wieloma punktami i trasami, które też da się osadzić. Nadaje się do mapy dojazdu z zaznaczonym parkingiem i wejściem od podwórza albo do listy oddziałów bez wtyczki. Nie nadaje się jako główna mapa firmy, bo nie pokazuje profilu z opiniami i godzinami. U klienta z gabinetem na trzecim piętrze biurowca użyłem obu: profil firmy jako mapa główna, Moje Mapy z zaznaczonym wejściem i parkingiem jako druga, mniejsza.
Mapa a RODO: zgoda przed wczytaniem
O tym nie przeczytasz w żadnym z poradników, które Google pokazuje na tę frazę, a to jedyny fragment, który może kosztować firmę pieniądze. Osadzona mapa to ramka wczytująca zawartość z serwerów Google. W momencie otwarcia podstrony kontaktu przeglądarka odwiedzającego łączy się z Google i przekazuje mu adres IP oraz dane o urządzeniu, zanim ten człowiek cokolwiek kliknie. To przekazanie danych osobowych do zewnętrznego dostawcy, na które w Unii potrzebna jest zgoda, tak samo jak na Google Analytics czy piksel Facebooka.
Rozwiązanie jest proste, jeśli masz porządnie skonfigurowany baner cookies. Complianz, którego używam na własnej stronie i u klientów, rozpoznaje ramki Google Maps, zastępuje je zaślepką z informacją „kliknij, aby wczytać mapę” i wczytuje mapę dopiero po zgodzie na kategorię marketingową albo po kliknięciu w zaślepkę. Podobnie działają Cookiebot i CookieYes. Ustawienie to jedno pole w konfiguracji wtyczki, nie wymaga kodu. Jeśli Twój baner nie potrafi blokować ramek, to nie jest baner zgodny z RODO, tylko dekoracja, i mapa jest najmniejszym z problemów tej strony.
Efekt uboczny jest przyjemny: zaślepka zamiast mapy to także rozwiązanie problemu z szybkością, o którym niżej.
Mapa a szybkość strony
Osadzona mapa to kilkaset kilobajtów skryptów, stylów i kafelków graficznych Google, wczytywanych na Twoją podstronę kontaktu. Bez opóźnienia wczytania mapa potrafi zjeść kilka punktów wyniku szybkości w PageSpeed i opóźnić moment, w którym strona nadaje się do użycia na telefonie. Trzy sposoby, od najprostszego:
- Atrybut loading z wartością lazy w kodzie ramki, jak w szablonie wyżej. Mapa poniżej pierwszego ekranu wczyta się dopiero, gdy użytkownik do niej przewinie. Koszt: zero, efekt: wystarczający dla większości stron.
- Zaślepka z banera cookies. Mapa nie wczytuje się w ogóle, dopóki ktoś nie wyrazi zgody albo nie kliknie. Najlepszy wynik szybkości i zgodność z RODO w jednym.
- Statyczny obraz zamiast ramki: zrzut albo własna, narysowana mapka dojazdu jako zwykły obrazek, z linkiem „Wyznacz trasę” prowadzącym do Google Maps w nowej karcie. Zero skryptów, zero cookies, a klient i tak trafia do nawigacji. Stosuję to na stronach, gdzie szybkość jest priorytetem, na przykład w stronach dla restauracji, które ludzie otwierają na telefonie w drodze.
Czego nie robić: nie wklejaj mapy w nagłówek ani w stopkę widoczną na każdej podstronie. Płacisz wtedy tym ciężarem na całej stronie za coś, czego użytkownik potrzebuje w jednym miejscu.
Gdzie umieścić mapę i co postawić obok niej
Podstrona kontaktu, pod danymi firmy albo obok nich. Sama mapa to za mało, bo mapa jest obrazkiem, a klient chce trzech rzeczy naraz: zobaczyć, gdzie to jest, wiedzieć, czy jest otwarte, i zadzwonić albo wyznaczyć trasę. Obok mapy postaw więc: pełny adres tekstem, a nie w samej grafice, bo Google i czytniki ekranu czytają tekst,, telefon jako link, który na telefonie od razu dzwoni, godziny otwarcia, i przycisk „Wyznacz trasę” z linkiem do profilu firmy w Google Maps. Jeśli wejście jest trudne do znalezienia, jedno zdanie o tym („wejście od podwórza, drugie drzwi na lewo od apteki”) zrobi więcej niż najładniejsza mapa.
Przy kilku lokalizacjach osobna sekcja na każdą z własną mapą i danymi, a nie jedna mapa z wieloma pinezkami i lista pod spodem. Google indeksuje takie sekcje jako osobne lokalizacje, a użytkownik nie musi zgadywać, która pinezka jest jego.
Najczęstsze problemy z mapą Google w WordPressie
Szary filtr i napis „for development purposes only” na mapie z wtyczki. Klucz API bez podpiętego konta rozliczeniowego albo z wyłączoną usługą. Wchodzisz do Google Cloud, sprawdzasz rozliczenia i włączone interfejsy. Przy mapie z metody pierwszej ten błąd nie występuje, bo nie ma klucza.
Mapa wystaje poza ekran telefonu. W kodzie stoi szerokość w pikselach. Zamień na 100 procent. Tyle.
Pusta ramka albo mapa znika po włączeniu wtyczki cache lub optymalizacji. Wtyczka opóźnia albo blokuje skrypty zewnętrzne. W jej ustawieniach wyklucz adres google.com/maps z opóźniania, albo zostaw opóźnianie i pogódź się z tym, że mapa wczyta się po pierwszej interakcji użytkownika, co przy zaślepce z banera cookies i tak jest normalne.
Mapa pokazuje adres, ale nie nazwę firmy. Osadziłeś z wyszukiwania po adresie albo profil firmy nie jest zweryfikowany. Wróć do pierwszej sekcji tego tekstu.
Mapa pokazuje nie tę firmę albo starą nazwę. Google połączyło Twój adres z innym profilem albo masz duplikat. Zgłaszasz to z poziomu profilu firmy, a do czasu naprawy osadzasz mapę z parametrem pb wygenerowanym po kliknięciu we właściwą pinezkę.
Czy mapa na stronie pomaga w pozycjonowaniu
Sama ramka z mapą nie jest czynnikiem rankingowym i nikt uczciwy nie obieca, że po jej wklejeniu strona pójdzie w górę. Pomaga natomiast to, co ją otacza. Google wiąże stronę z profilem firmy przez spójność danych: ta sama nazwa, adres i telefon na stronie, w profilu i w katalogach. Do tego dane strukturalne LocalBusiness na podstronie kontaktu, które mówią wyszukiwarce, gdzie jesteś i kiedy otwierasz, i link ze strony do profilu oraz z profilu do strony. Mapa jest dla człowieka, te trzy rzeczy dla algorytmu, i obie strony muszą się zgadzać.
W lokalnym SEO profil firmy robi zresztą więcej niż strona przez pierwsze miesiące: dobrze uzupełniony, z opiniami i zdjęciami, potrafi przynieść telefony, zanim strona zbierze pierwsze pozycje. Jak to wygląda w praktyce, opisałem przy pozycjonowaniu stron w Gorzowie Wielkopolskim, a zakres pracy nad widocznością lokalną przy pozycjonowaniu stron. O tym, jak pozycjonować samą wizytówkę Google, przygotowuję osobny tekst, bo to temat na własny artykuł.
Od czego zacząć
Krótko. Sprawdź, czy Twoja firma jest na mapie z nazwą. Jeśli nie, załóż profil dziś, bo weryfikacja potrwa. Jeśli tak, skopiuj kod z pinezki firmy, popraw szerokość, dodaj lazy i title, wklej w blok Własny HTML na kontakcie, a w banerze cookies włącz blokowanie ramek Google Maps. Obejrzyj na telefonie. Kwadrans, jeśli profil już jest.
Jeśli robisz nową stronę, mapa, profil firmy i baner cookies są w niej od razu, bo to standard w każdej stronie firmowej, którą buduję. Wypełnij formularz bezpłatnej wyceny, oddzwaniam w godzinach roboczych z konkretną kwotą. A jeśli strona już jest i nie wiesz, czy mapa, cookies i szybkość są na niej w porządku, bezpłatny audyt strony sprawdzi to w 24-48 godzin razem z resztą rzeczy, które hamują zapytania.
Najczęstsze pytania o mapę Google na stronie WordPress
Czy do wstawienia mapy Google na stronę potrzebny jest klucz API?
Nie, jeśli osadzasz mapę kodem z opcji Udostępnij w Google Maps. Ta usługa jest bezpłatna, bez limitu wyświetleń i bez klucza. Klucz API i konto rozliczeniowe są potrzebne tylko przy wtyczkach i builderach, które korzystają z Maps JavaScript API.
Ile kosztuje mapa Google na stronie?
Osadzenie kodem z Google Maps jest darmowe. Mapy z wtyczek korzystające z API mają od marca 2025 miesięczną pulę bezpłatnych wywołań dla każdej usługi zamiast dawnego kredytu 200 dolarów; typowa strona firmowa mieści się w niej, ale aktualne progi sprawdź w cenniku Google, a klucz ogranicz do swojej domeny.
Czy mapa Google na stronie jest zgodna z RODO?
Sama z siebie nie, bo wczytuje zawartość z serwerów Google i przekazuje adres IP odwiedzającego przed jakąkolwiek zgodą. Zgodność zapewnia baner cookies, który blokuje ramkę mapy do czasu zgody, na przykład Complianz z włączonym blokowaniem ramek. Alternatywą jest statyczny obraz mapy z linkiem do nawigacji.
Jak dodać na stronę mapę z kilkoma lokalizacjami?
Przy dwóch, trzech punktach osadź osobną mapę pod każdą lokalizacją z jej adresem i telefonem, to lepsze dla Google i dla użytkownika. Przy sieci punktów z filtrowaniem albo wyszukiwarką najbliższego oddziału użyj wtyczki, na przykład WP Go Maps, z kluczem API ograniczonym do domeny.
Jak dodać mapę Google w Elementorze?
Widget Mapy Google w Elementorze osadza mapę z adresu bez klucza API, ale pokazuje pinezkę bez nazwy firmy i opinii. Lepszy efekt daje widget HTML z wklejonym kodem osadzania skopiowanym z profilu firmy w Google Maps, tak jak w bloku Własny HTML w Gutenbergu.
