Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać Mapy Google w WordPress (PRAWIDŁOWY SPOSÓB)

Dla lokalnych firm wyświetlanie twojej lokalizacji na interaktywnej mapie to nie tylko wygoda – to kluczowy element strategii cyfrowej.

Dodanie Map Google do Twojej witryny internetowej może znacznie poprawić komfort użytkowania, ułatwiając odwiedzającym znalezienie Twojej lokalizacji. Dodatkowo może to zwiększyć widoczność Twojej witryny w wyszukiwarkach, przyciągając więcej odwiedzających i potencjalnych klientów.

Zbadaliśmy najlepsze sposoby na płynną integrację Map Google z twoją witryną internetową WordPress, poprawiając zarówno komfort użytkowania, jak i SEO.

W tym artykule pokażemy, jak odblokować moc Map Google w WordPress.

Add Google Maps in WordPress

Dlaczego warto dodać Mapy Google w WordPress?

Czy wiesz, że Mapy Google to najpopularniejsza aplikacja nawigacyjna na wszystkich platformach?

Jeśli masz biuro lub fizyczny adres sklepu, to dodanie Map Google do Twojej witryny internetowej WordPress ułatwia użytkownikom szybkie zlokalizowanie Twoich fizycznych sklepów, restauracji lub punktów sprzedaży detalicznej. Pomaga to przyciągnąć więcej klientów i wygenerować większy biznes.

Nie tylko to, ale osadzanie Google Maps może również poprawić twoje WordPress SEO. Według Google 46% wszystkich wyszukiwań to wyszukiwania lokalne. Dodanie Map Google do WordPressa może zwiększyć Twoje lokalne SEO i poprawić Twoją widoczność w lokalnych wyszukiwaniach.

Istnieją dwa sposoby osadzania Map Google w WordPressie, a my pokażemy ci oba.

Zaletą drugiej metody jest to, że jest ona zgodna ze wszystkimi najlepszymi praktykami lokalnego SEO, więc jeśli z niej skorzystasz, Google zacznie uwzględniać Twoją lokalizację w Mapach Google. Wyświetli również informacje o twojej firmie, takie jak nazwa, logo, adres, telefon i godziny otwarcia w lokalnych wynikach wyszukiwania.

W związku z tym zobaczmy, jak można dodać Mapy Google do WordPressa. Poniżej znajdują się szybkie odnośniki, za pomocą których można przejść do wybranej sekcji:

Jak dodać Mapy Google do WordPressa bez wtyczki?

Jeśli chcesz szybko osadzać Mapy Google we wpisie lub na stronie WordPress, możesz użyć domyślnej metody iFrame.

Wystarczy przejść do witryny internetowej Google Maps i wpisać dowolny adres ulicy w polu wyszukiwania.

Find location in Google Maps and Click Share to Embed

Następnie należy kliknąć ikonkę Udostępnij, co spowoduje wyświetlenie wyskakującego okienka z opcją wysłania odnośnika do lokalizacji lub osadzania mapy.

Należy wybrać opcję „Osadzanie mapy”.

Copy Google Maps HTML Embed Code

Następnie wystarczy skopiować kod HTML dla Google Maps, a następnie otworzyć stronę, na której chcemy osadzać mapę.

Wewnątrz edytora bloków należy dodać własny blok HTML.

Select Custom HTML block in WordPress

Teraz wystarczy wkleić kod osadzania skopiowany z Google Maps.

Następnie należy zaktualizować lub opublikować stronę, aby wyświetlić podgląd zmian.

Google Maps iFrame Embed Code in Block Editor

Ta metoda sprawdza się do szybkiego osadzania Map Google, ale nie zapewnia maksymalnych korzyści SEO.

Jeśli jesteś małą firmą, restauracją lub sklepem internetowym z jednym lub wieloma ustawieniami regionalnymi, zalecamy skorzystanie z następnego rozwiązania, aby zmaksymalizować Twoje lokalne rankingi SEO, ponieważ wykorzystuje ono odpowiednie dane otwartego wykresu, aby pomóc Ci uzyskać wyższą pozycję w Google.

Jak dodać Mapy Google do WordPressa za pomocą wtyczki Local SEO?

Najlepszym sposobem na dodanie Map Google i zoptymalizowanie Twojej witryny pod kątem lokalnego SEO jest użycie All in One SEO (AIOSEO).

Jest to najlepsza wtyczka SEO dla WordPressa, ponieważ pomaga uzyskać wyższe rankingi SEO bez edytowania kodu lub zatrudniania programisty. Ponad 3 miliony profesjonalistów korzysta z AIOSEO, aby poprawić swoje rankingi w wyszukiwarkach.

AIOSEO

W tym poradniku będziemy używać wersji AIOSEO Pro, ponieważ zawiera ona funkcję regionalnego SEO i inne zaawansowane opcje optymalizacji. Istnieje również darmowa wersja AIOSEO, której możesz użyć, aby rozpocząć optymalizację twojej witryny pod kątem wyszukiwarek.

Najpierw musisz zainstalować i włączyć wtyczkę AIOSEO w WordPress. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat instalacji wtyczki WordPress.

Po włączaniu wtyczka uruchomi kreator konfiguracji. Możesz kliknąć przycisk „Let’s Get Started”, aby skonfigurować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat prawidłowej konfiguracji All in One SEO w WordPress.

AIOSEO setup wizard

Następnie możesz przejść do All in One SEO ” Local SEO z twojego kokpitu WordPress.

Następnie kliknij przycisk „Włącz Local SEO”, aby rozpocząć konfigurację ustawień lokalnych.

Activate local SEO

Po włączeniu dodatku Local SEO dla WordPress można dodać pojedynczą lokalizację lub wiele lokalizacji w AIOSEO i wyświetlać je na Mapach Google. Pokażemy ci, jak dodać obie te opcje do twojej witryny internetowej.

Dodawanie pojedynczej lokalizacji

Aby dodać twoje ustawienia regionalne, informacje o firmie, godziny otwarcia i inne, musisz najpierw przejść do All in One SEO ” Local SEO i otworzyć kartę „Lokalizacje”.

Jeśli masz jedną fizyczną lokalizację, pozostaw opcję „Wiele lokalizacji” ustawioną na Nie.

Location tab under local SEO

Następnie przewiń w dół do sekcji „Mapy”, aby przypiąć twoją dokładną lokalizację.

Wystarczy, że wpiszesz swój adres w polu „Wpisz zapytanie”, a Mapy Google wskażą Twoją lokalizację.

Pin your store location

Gdy już wpiszesz swoją lokalizację, nie zapomnij kliknąć przycisku „Zapisz zmiany”.

Dodawanie wielu lokalizacji

Jeśli masz więcej niż jedną fizyczną lokalizację, musisz włączyć ustawienie „Wiele lokalizacji” na karcie „Lokalizacja” w Local SEO.

Enable multiple locations

Następnie w twoim panelu administratora WordPress pojawi się nowe menu Locations.

Przejdź do sekcji Lokalizacje, a następnie kliknij przycisk „Utwórz nową”.

Add a new location

Gdy znajdziesz się w edytorze WordPress, przewiń w dół do sekcji „Mapa”.

Tutaj możesz wpisz swój adres w polu „Wpisz zapytanie”.

Add multiple map locations

Po wpiszeniu twojej lokalizacji na mapie i dodaniu informacji o lokalizacji, kliknij przycisk „Opublikuj”.

Możesz teraz powtórzyć ten krok i dodać dowolną liczbę lokalizacji dla Twojej firmy.

Po zakończeniu dodawania Twoich ustawień regionalnych, możesz przejść do karty „Mapy” z powrotem w menu All in One SEO ” Local SEO.

Tutaj będziesz musiał wpisz klucz API Google Maps.

Enter Google maps API key

Zobaczmy teraz, jak utworzyć klucz API dla Google Maps.

Tworzenie klucza API Map Google

Aby rozpocząć, należy przejść na witrynę internetową Google Maps Platform i kliknąć przycisk „Rozpocznij”.

Google maps platform

Po zalogowaniu się na twoje konto Google, będziesz musiał skonfigurować konto rozliczeniowe.

Platforma Google Maps ma ceny płatności zgodnie z rzeczywistym użyciem i oferuje pierwsze 300 USD miesięcznego użytkowania za darmo dla wszystkich użytkowników. W przypadku większości witryn internetowych z łatwością pokryje to proste osadzanie map, takie jak to, które tworzymy w tym poradniku.

Nie martw się, nie będą pobierać żadnych opłat, chyba że ręcznie uaktualnisz konto do płatnego.

Aby rozpocząć, kliknij przycisk „Utwórz konto rozliczeniowe”.

Create a billing account

Następnie możesz wybrać swój kraj i z rozwijanego menu wybrać to, co najlepiej opisuje twoją organizację.

Po wybraniu tych informacji kliknij pole wyboru dla opcji Warunki korzystania z usługi, a następnie kliknij przycisk „Kontynuuj”.

Enter personal details for billing account

Na następnym ekranie będziesz musiał wpisz swój numer telefonu w celu weryfikacji.

Gdy to zrobisz, kliknij przycisk „Wyślij kod”.

Enter mobile number

Po zweryfikowaniu kodu, następną rzeczą do zrobienia jest wpisz nazwę twojej firmy, szczegóły metody płatności i adres rozliczeniowy.

Po wpiszeniu tych danych kliknij przycisk „Rozpocznij mój bezpłatny okres próbny”.

Enter business name and payment details

Następnie zostaniesz poproszony o udzielenie odpowiedzi na serię 4 pytań dotyczących Twojej organizacji i sposobu korzystania z platformy Google Maps.

Mapy Google zapytają o główny cel korzystania z platformy, branżę, w której działasz, wybierz przypadek użycia i wielkość Twojej firmy.

Po udzieleniu odpowiedzi na te pytania, kliknij przycisk „Wyślij”.

Answer few questions for google maps

Zobaczysz teraz wyskakujące okienko z twoim kluczem API Google Maps.

Klucz ten można skopiować i zapisać w pliku tekstowym do wykorzystania w przyszłości.

Copy the API key

Teraz, gdy utworzyłeś klucz API Google Maps, musisz wrócić do kokpitu WordPress, aby wpisz go w ustawieniach AIOSEO Local SEO.

Konfigurowanie ustawień Google Maps w WordPress

Możesz teraz wrócić do All in One SEO ” Local SEO z kokpitu WordPress, a następnie przejść do karty „Mapy”.

Następnie wpisz klucz API Google Maps w polu „Klucz API”. Zaraz po dodaniu klucza zobaczysz podgląd mapy w AIOSEO.

Add API key and see map preview

Następnie możesz przewinąć w dół, aby edytować ustawienia mapy.

AIOSEO pozwala wyświetlać Mapy Google za pomocą bloku Gutenberg, krótkiego kodu, widżetu lub kodu PHP. Pozwala także wybrać różne style map i dodać własny konfigurator do twojej mapy.

Edit map settings

Nie zapomnij kliknąć przycisku „Zapisz zmiany” po zakończeniu.

Wyświetlanie map Google w WordPressie

Następnie możesz dodać Mapy Google do dowolnego wpisu lub strony WordPress. Aby rozpocząć, po prostu edytuj lub utwórz nową stronę w Twojej witrynie internetowej.

Po przejściu do edytora bloków kliknij przycisk „+” u góry i dodaj blok AIOSEO Local – Map w dowolnym miejscu na stronie.

Add local maps block

Następnie twoja mapa Google zostanie dodana do strony.

AIOSEO pozwala również edytować ustawienia mapy z poziomu opcji po twojej prawej stronie. Można na przykład wyświetlać etykiety i ikonki, dodawać własne znaczniki oraz edytować szerokość i wysokość mapy.

Edit your map in WordPress

Jeśli posiadasz wiele lokalizacji, możesz wybrać, które położenie ma zostać wyróżnione, wybierając jedną z opcji podanych w menu po prawej stronie.

Wystarczy kliknąć menu rozwijane „Lokalizacja” i wybrać preferowane położenie, które ma być wyświetlane na Twojej witrynie internetowej.

Choose which location to display

Gdy będziesz zadowolony z twoich ustawień, przejdź dalej i opublikuj stronę.

Teraz użytkownik może przejść na Twoją witrynę internetową, aby zobaczyć Mapy Google w działaniu.

Preview your map

Możesz także dodać Mapy Google do sekcji widżetów twojej witryny, takich jak panel boczny lub stopka.

Aby rozpocząć, przejdź do Wygląd ” Widżety w twoim panelu administracyjnym WordPress. Następnie kliknij przycisk „+” i dodaj blok widżetu „AIOSEO Local – Map” w miejscu, w którym chcesz wyświetlić swoją lokalizację.

Add maps widget

Następnie można edytować ustawienia widżetu.

Możesz na przykład dodać tytuł, zmienić szerokość i wysokość mapy, wybrać lokalizację do wyświetlenia, jeśli masz wiele lokalizacji, i edytować etykietę.

Edit map widget settings

To wszystko!

Teraz, gdy zaktualizujesz swoją witrynę internetową, zobaczysz Mapy Google w obszarze widżetów.

Maps preview in widget area

Przewodniki ekspertów na temat korzystania z map w WordPressie

Teraz, gdy już wiesz, jak dodać Mapy Google do twojej witryny, być może spodoba ci się kilka innych przewodników związanych z mapami i lokalizacją w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać Mapy Google do twojej witryny WordPress. Możesz również zobaczyć nasze propozycje najlepszych wtyczek Mapbox WordPress dla małych firm i dowiedzieć się, jak dodać lokalizator sklepu Google Maps w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

36 komentarzyZostaw odpowiedź

  1. Dennis Muthomi

    thanks for this well-explained guide! I have an issue that I need help with though. One of my websites has a dark mode color design because tha;ts how the theme was designed and coded. I also use Google Maps quite often, and I know there is a dark mode version available.

    is there a way to add the dark mode version of Google Maps to my website instead of the regular version? I just want the map to match my website’s dark theme design.

    • WPBeginner Support

      At the moment we do not have a recommended easy method for changing the map to their dark mode variant in embeds. If that changes we will be sure to share!

      Administrator

  2. Moinuddin Waheed

    This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
    Both the methods without plugin and with AIOSEO are good and serves my need.
    But I would go with AIOSEO to implement this feature as it will also help in local seo.
    Thanks for this helpful guide for embedding Google map.

  3. melanie bund

    Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
    Thank you in advance
    Melanie

  4. Donata

    I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?

  5. Sharon

    Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.

    • Mark

      Hi I’m trying to insert a google map onto my website ( Wordpress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free

      • WPBeginner Support

        Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.

        Administrator

        • Kamil

          Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from Wordpress.org.

        • WPBeginner Support

          While we have not tested it yet, we will be sure to take a look at it.

  6. Blessy

    I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?

  7. Miranda Olding

    Thanks – so clear x

  8. Sara C

    Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.

    Many, many thanks for this tutorial.
    Sara

  9. Denny Png

    Dear Sir/Madam,

    I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.

    Seek yr kind advise on it!

    Thankyou!

    Rdgs,
    Denny Png

  10. Kathy

    Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!

  11. Andy Kramer

    I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?

    • Karen

      I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?

  12. Mari

    Hi!
    I can’t find the code.. There’s no „flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
    Thanks in advance.

  13. Andy Meuleman

    A great lesson, easy to follow and implement.

    Much thanks, Andy

  14. Karthik

    Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??

    • Parmod

      Can you be more specific about what exactly do you need

  15. Bigg Tobias Inspired

    So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?

  16. Carla Spacher

    Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?

    By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on „Share and embed map”. Then click on „Embed map” and enter into your WP page/or post.

  17. WRC

    Thank you. Very helpful post.

  18. Rory

    Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
    Thanks for your help.

  19. aamir

    hello sir,

    i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.

    Thanks & Regards,
    aamir

  20. Trang Tran

    Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?

  21. Guilherme

    Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?

    Thanks

  22. Christopher Rose

    Thanks for all the informative WP articles you’re posting.

    Is it possible to add a Google Map to a site that

    1. automatically adds the location of all site visitors or commenters to a map
    and
    2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.

  23. Widdershins

    That is so cool! … thanks :D

    • zakaria

      Thank you very much!

      I have already founded (MapPress Easy Google Maps) and it is nice plugin.
      And of course, your attention is very nice support. THANKS!!!
      One more thing, please.
      I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
      May be you would be so kind to advice some other plugins to solve this problem.

      Thanks advance
      Best regards
      Zakaria

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.