Jak zrobić mapę Google z wieloma szpilkami w WordPress
Opublikowany: 2025-07-23Dodanie mapy do Twojej witryny może pomóc odwiedzającym łatwo znaleźć lokalizację firmy lub wydarzeń. Jeśli Twoja firma ma więcej niż jedną lokalizację, możesz pokazać je wszystkie na tej samej mapie. Tutaj może stać się pomocne użycie wielu pinów na mapie Google.
Jeśli Twoja witryna jest zbudowana z Elementor, nie będziesz musiał dużo kłopotów z dodaniem wielu pinów na mapie Google. Zamiast tego możesz łatwo dodać tyle, ile chcesz. Proces ten jest dość prosty, nawet dla początkujących.
W tym poście omówimy szczegółowy samouczek, jak zrobić mapę Google z wieloma stykami w WordPress z Elementor. Ale wcześniej omówimy kilka słów o tym, dlaczego i kiedy powinieneś korzystać z Map Google z wieloma szpilkami na swoich stronach WordPress.
Dlaczego warto korzystać z Map Google z wieloma szpilkami na swojej stronie WordPress

Korzystanie z Map Google z wieloma szpilkami może na wiele sposobów ulepszyć Twoją witrynę. Nie chodzi tylko o pokazanie lokalizacji. Może pomóc użytkownikom budować zaufanie i uczynić twoją witrynę bardziej przydatną, ponieważ mogą łatwo znaleźć Twoje sklepy. Oto kilka najważniejszych powodów, dla których powinieneś to rozważyć.
1. Pokaż wszystkie swoje lokalizacje w jednym miejscu
Jeśli Twoja firma ma kilka oddziałów, sklepów lub biur, wiele pinów może pomóc wyświetlić je wszystkie na jednej mapie. Ułatwia to odwiedzającym widok każdej lokalizacji na pierwszy rzut oka bez przełączania między różnymi mapami lub stronami.
2. Pomóż użytkownikom znaleźć najbliższe miejsce
Kiedy użytkownicy widzą wszystkie lokalizacje na jednej mapie, mogą szybko znaleźć ten, który jest im najbliższy. Może to poprawić ich doświadczenie i pomóc im szybciej podjąć działania, takie jak wizyta w sklepie lub rezerwacja wizyty.
3. Zaoszczędź czas dla odwiedzających
Zamiast wymieniać każdy adres jeden po drugim w zwykłym tekście, możesz pokazać je wizualnie za pomocą pinów. To oszczędza czas zarówno dla Ciebie, jak i Twoich odwiedzających. To sprawia, że Twoja strona wygląda bardziej profesjonalnie i nowoczesna.
4. Zwiększ lokalny SEO z danymi lokalizacji
Mapy Google mogą pomóc w lokalnym SEO Twojej witryny. Po dodaniu prawdziwych adresów do mapy opowiada wyszukiwarki o lokalizacjach biznesowych. Może to pomóc Twojej witrynie pojawić się w lokalnych wynikach wyszukiwania. Przeglądaj, jak ulepszyć lokalne SEO z HappyAddons.

5. Spraw, aby Twoja witryna była bardziej interaktywna
Mapa z wieloma szpilkami wygląda bardziej interaktywne i dynamiczne niż zwykły tekst. Odwiedzający mogą powiększać, kliknąć szpilki i eksplorować mapę. To sprawia, że Twoja witryna jest bardziej wciągająca i przyjazna dla użytkownika.
6. Idealny do firm opartych na usługach lub wielobranżach
Jeśli prowadzisz sieć restauracji, klinik, sklepów lub punktów dostawy, wiele pinów pomaga wyraźnie wyjaśnić swój zasięg. Jak już powiedziano powyżej, buduje to zaufanie i pomaga użytkownikom wybrać najbliższe miejsce.
Wymagania wstępne tworzenia mapy Google z wieloma szpilkami z Elementor
Wyjaśnijmy jedną rzecz na początku. Elementor ma wbudowany widżet o nazwie Google Map . Ale jego funkcje są bardzo ograniczone. Nie możesz dodać wielu pinów do mapy za pomocą tego domyślnego widżetu. Aby to zrobić, potrzebujesz dodatkowego dodatku.
Jedną świetną opcją są HappyAddons . Oferuje widżet o nazwie Advanced Google Maps , który umożliwia łatwe tworzenie i dodawanie wielu pinów do mapy bez żadnych kłopotów.
W sumie potrzebujesz następujących narzędzi na swojej stronie do tego samouczka.
- Elementor
- Happyaddons
- Happyaddons Pro
HappyAddons Pro jest wymagany, ponieważ zaawansowana mapa Google jest widżetem premium wtyczki. Po ich zainstalowaniu i aktywowaniu w Twojej witrynie, zacznij śledzić samouczek, jak wspomniano poniżej. Przeglądaj wszystkie inne widżety Happyaddons.
Jak zrobić mapę Google z wieloma szpilkami w WordPress: Skabelk po kroku samouczek
W tej sekcji wyjaśnimy krok po kroku, jak zrobić mapę Google z wieloma szpilkami w WordPress z wtyczkami Elementor i HappyAddons. Udekorujemy tę sekcję również niezbędnymi zrzutami ekranu, abyś mógł zrozumieć pełny proces. Czytaj dalej!
Krok 01: Otwórz stronę i znajdź zaawansowany widżet mapy Google
Otwórz post lub stronę, w której chcesz utworzyć mapę Google z wieloma pinami. Znajdź zaawansowany widżet mapy Google na panelu elementor. Przeciągnij i upuść na płótnie Elementor.

Krok 02: Pobierz klucz API Google
Po dodaniu widżetu do płótna zostaniesz poproszony o skonfigurowanie poświadczeń do wyświetlania mapy Google. Aby to rozpocząć, kliknij opcję poświadczeń w sekcji Ustawienia ogólne na panelu.

Zostaniesz przeniesiony do sekcji poświadczeń HappyAddons na zapleczu strony internetowej. Znajdź opcję Mapy Google . Następnie naciśnij opcję GET API KLUCZ .

Przyjdziesz na stronę Google Cloud.

Teraz musisz znaleźć „Maps JavaScript API”. W tym celu wpisz interfejs API JavaScript w polu wyszukiwania. Po wyświetleniu opcji kliknij ją .

Po przybyciu na stronę MAPS JavaScript API włącz opcję .

Naciśnij przycisk Zgadzaj się i kontynuuj . Wcześniej możesz wybrać swój kraj. Rozmyliśmy to w naszej sprawie.

Klucz Google API nie jest technicznie bezpłatny. Musisz wypełnić informacje o rozliczeniu, aby uzyskać API.
Uwaga (jak to jest bezpłatne): Chociaż nie jest to technicznie bezpłatne, otrzymasz tokeny równoważne 200 USD miesięcznie za koszty . Za pomocą tego tokena mapa Google można załadować lub wyświetlić do 28 000 razy . Tylko jeśli ten wyświetlenie/limit obciążenia zostanie przekroczony, Twoja karta zostanie naładowana.

Następnie otrzymasz wyskakujące okienko. Musisz podać informacje o swojej firmie, w której zostanie użyta ta mapa. Po zakończeniu kliknij przycisk Prześlij w prawym dolnym rogu wyskakującego okienka.


Klucz API Map Google pojawi się natychmiast na ekranie z nowym okienkiem. Skopiuj klucz API .

Wróć do opcji klucza HappyAddons Google API i wklej tam swój kod . Na końcu naciśnij przycisk Zapisz zmiany .

Teraz przyjdź na płótnie Element i odśwież/ponownie załaduj. Mapa Google pojawi się na płótnie.

Sprawdź, jak utworzyć oś czasu w WordPress z Elementor.
Krok 03: Dodaj wiele pinów do mapy
Domyślnie na mapie wyświetlany jest tylko jeden szpilka. Aby dodać i wyświetlić więcej pinów do mapy, rozwinąć sekcję znacznika mapy na panelu.

Po rozszerzeniu sekcji znacznika mapy możesz dodać tyle pinów, ile chcesz , klikając przycisk + Dodaj element .

Teraz, umieszczając wartości dla szerokości i długości geograficznej, możesz dokładnie ustawić szpilki dla każdego miejsca.

Krok 04: Skonfiguruj ustawienia mapy
W ten sam sposób poszerz sekcję ustawień mapy .

W tej sekcji znajdziesz wiele opcji.

Teraz uprzejmie odkrywasz każdą opcję, włączając i wyłączając, aby zobaczyć, jak działają, aby w końcu pozostać z tymi, które odpowiadają potrzebnemu projektowi.
Dowiedz się, jak utworzyć galerię obrazów automatycznego zrolowania w WordPress.
Krok 05: Styluj zaawansowany widżet map Google
Po zakończeniu wszystkich ustawień i części zawartości przejdź do zakładki Style . Stąd możesz dostosować wysokość, szerokość, rodzaj granicy, promień obramowania i więcej opcji.

W ten sam sposób poszerz inne opcje i wykonaj niezbędne dostosowania, ponieważ chcesz zmienić wygląd szpilków.

Krok 06: Podgląd projektu
Po zakończeniu projektu, przed opublikowaniem go online, podgląd, aby sprawdzić, czy wymagana jest każda korekta lub modyfikacja. Widać, że widżet działa dobrze po naszym końcu w klipu wideo dołączonym poniżej.
W ten sposób możesz stworzyć mapę Google z wieloma szpilkami w WordPress z Elementor.
Zaawansowane wskazówki dotyczące mapy Google z wieloma szpilkami
Po dodaniu wielu pinów do mapy Google jest więcej rzeczy, które możesz zrobić, aby mapa działała lepiej dla odwiedzających i witryny. Te zaawansowane wskazówki pomogą Ci sprawić, że mapa wyglądała bardziej profesjonalnie, poprawi wrażenia użytkownika, a nawet wspierać lokalne wysiłki SEO.

1. Użyj niestandardowych obrazów zamiast ikon
Zamiast domyślnego czerwonego szpilki spróbuj użyć niestandardowych ikon lub obrazów dla każdej lokalizacji. HappyAddons pozwala to zrobić z sekcji Content Tab> Map Marker Section. Niestandardowe obrazy i ikony mogą sprawić, że mapa jest bardziej wizualnie wyraźna i atrakcyjna.
2. Ustawienia powiększenia i środka
Dostosuj poziom powiększenia i środek mapy, aby poprawnie pokazać wszystkie szpilki. Jeśli niektóre szpilki są daleko od siebie, upewnij się, że poziom powiększenia jest wystarczająco szeroki, aby wszystkie z nich były widoczne, gdy mapa ładuje się. Daje to użytkownikom pełny przegląd bez konieczności ręcznego przenoszenia mapy.
3. Spraw, aby był przyjazny dla urządzeń mobilnych
Zawsze sprawdzaj, jak wygląda twoja mapa na urządzeniach mobilnych. Upewnij się, że ładuje się szybko, piny można kliknąć, a pola informacyjne są czytelne na małych ekranach. Mapa, która działa dobrze zarówno na komputerze komputerowym, jak i mobilnym, zapewni więcej użytkowników.
4. Ustaw mapy na stronach kontaktu lub lokalizacji
Nie zostawiaj tylko mapy na jednej stronie. Możesz ponownie wykorzystać tę samą mapę, osadzając ją na innych stronach, takich jak „Skontaktuj się z nami”, „nasze lokalizacje” lub strony „Odwiedź nas”. Pomaga to użytkownikom znaleźć odpowiednie miejsce wszędzie tam, gdzie są na Twojej stronie.
Dowiedz się, jak utworzyć dynamiczną stronę internetową w WordPress z Elementor.
Wniosek
Tworzenie mapy Google z wieloma szpilkami może być prostym krokiem lub częścią twojego projektu stron internetowych, ale może mieć długotrwałe wrażenie. Nie tylko może pomóc odwiedzającym znaleźć Twoje lokalizacje, ale także zwiększyć lokalny wynik SEO i sprawić, że Twoja witryna będzie wyglądać bardziej profesjonalnie.
Za pomocą wtyczek Elementor i HappyAddons możesz łatwo dodać je do swojej witryny bez większego problemu. Jest to tak proste, że nawet początkujący mogą to zrobić, śledząc powyższy samouczek. Jeśli nadal masz jakieś pytania bez odpowiedzi, daj nam znać za pośrednictwem pola komentarza poniżej.
Wkrótce się do Ciebie skontaktujemy z rentownymi odpowiedziami. Dzięki za bycie z nami do końca. Daj nam znać, który temat chcesz, abyśmy omówili w następnym poście.