Jak zrobić mapę Google z wieloma szpilkami w WordPress

Opublikowany: 2025-07-23

Dodanie 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

Why Use Google Maps with Multiple Pins on Your WordPress Site

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.

Boost Local SEO with Location Data

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.

Use the Advanced Google Map widget to create multiple pins

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.

Get credential for the Advanced Google Map

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

Get Google Map API Key

Przyjdziesz na stronę Google Cloud.

Google Cloud Page

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

Find Maps JavaScript API

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

Enable Maps JavaScript API

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

Configure JavaScript Account

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.

Complete the billing information

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.

Fill in your industry-related information

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

Copy the Google Map API key

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

Paste the Google Map API key to HappyAddons

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

Google map appears on the Elementor Canvas

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.

Expand the Map Marker section on the panel

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

Add more pins to the Google Map

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

Add latitude and longitude to pins on Google Map

Krok 04: Skonfiguruj ustawienia mapy

W ten sam sposób poszerz sekcję ustawień mapy .

Configure Map Settings

W tej sekcji znajdziesz wiele opcji.

Mag Settings options of the Advanced Google Map widget

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.

Stylize the Advanced Google Map Widget

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

Stylize the other options of the Advanced Google Map widget

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.

Advanced Tips for Google Map with Multiple Pins

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.