Jak wstawić mapę Google na stronę Wordpress?

Jak wstawić mapę Google
na stronę WordPress?

Kompletny poradnik Krok po Kroku. Od prostego wklejenia kodu po zaawansowane API.

📈

Czy wiesz, że aż 46% wszystkich wyszukiwań w Google ma charakter lokalny? Obecność mapy na Twojej stronie to konieczność. Ułatwia dotarcie do firmy, buduje zaufanie i wspiera Local SEO.

Metoda 1: Najprostsza

Ręczne wklejenie kodu (Bez API)

Idealna opcja, jeśli chcesz po prostu pokazać lokalizację na stronie "Kontakt". Darmowa, bezpieczna i lekka.

Znajdź firmę: Wejdź na Google Maps i wpisz swój adres.
Udostępnij: Kliknij przycisk "Udostępnij" (ikona strzałki).
Wybierz opcję: Przejdź do zakładki "Umieszczanie mapy" (Embed a map).
Kopiuj: Wybierz rozmiar i kliknij "Kopiuj kod HTML".
Wklej w WP: W edytorze Gutenberg dodaj blok "Własny HTML" i wklej kod.

✨ Wskazówka SEO: Google automatycznie rozpoznaje tę metodę, co wzmacnia powiązanie Twojej strony z wizytówką Google Moja Firma.

Metoda 2: Wtyczki

Dla wymagających (Wiele pinezek)

Potrzebujesz filtrów, wielu lokalizacji lub niestandardowych kolorów? Użyj wtyczki.

WP Go Maps

Najpopularniejsza. Pozwala na tworzenie map bez API (w wersji basic) oraz zaawansowanych z API.

MapPress

Świetna do tworzenia map interaktywnych.

⚠️ Uwaga na Google Maps API:
Większość zaawansowanych wtyczek wymaga klucza API. Musisz założyć konto na Google Cloud Platform i podpiąć kartę (masz 200$ darmowego limitu co miesiąc).

Metoda 3: Page Builder

Elementor, Divi, Bricks

Jeśli Twoja strona jest zbudowana na kreatorze wizualnym, dodanie mapy to kwestia przeciągnięcia elementu.

Elementor: Wyszukaj widget "Google Maps", przeciągnij i wpisz adres. Gotowe!
Divi: Użyj modułu "Map". Tutaj zazwyczaj potrzebujesz klucza API do poprawnego działania.

Coś nie działa?

Rozwiązujemy najczęstsze problemy z mapami.

Błąd "For development purposes only"

Widzisz szary filtr na mapie?

Brak podpiętego konta rozliczeniowego w Google Cloud lub błędny klucz API. Sprawdź billing w konsoli Google.

Mapa spowalnia stronę

Wynik PageSpeed spadł?

Zastosuj Lazy Loading. Wtyczki jak WP Rocket potrafią ładować mapę dopiero po przewinięciu do niej.

Mapa wychodzi poza ekran telefonu

Problem z RWD w metodzie ręcznej?

Zmień w kodzie HTML wartość width="600" na: width="100%"

Dlaczego warto? (Aspekt E-E-A-T)

Weryfikuje istnienie firmy

Poprawia User Experience

Wspiera Voice Search

Nie czujesz się na siłach?

Konfiguracja kluczy API, zabawa z kodem HTML czy optymalizacja mapy może być przytłaczająca. Błąd może nawet narazić Cię na koszty w Google Cloud.

Zleć wdrożenie mapy ekspertom →

Moje konto