Kompletny przewodnik: Jak osadzić Mapy Google w WordPress

Jak osadzić pojedynczą lokalizację Google Maps w WordPress?

Zacznijmy od najbardziej podstawowego sposobu pokazywania lokalizacji Map Google w witrynie WordPress. Jeśli chcesz tylko osadzić mapę z jedną lokalizacją lub widokiem, nie potrzebujesz żadnych wymyślnych narzędzi ani wtyczek – wystarczy wkleić kod do osadzania Map Google w witrynie WordPress .

Oto jak to wszystko działa:

Przejdź do witryny Mapy Google jak zwykle i wyszukaj lokalizację, którą chcesz umieścić. Możesz szukać wszystkiego. To znaczy:

• Cały kraj
• Konkretne miasto
• Konkretny biznes
• Ty to nazywasz

To naprawdę nie ma znaczenia!

Gdy masz już lokalizację, którą chcesz pokazać na mapie, poszukaj przycisku Udostępnij na lewym pasku bocznym:

Powinieneś zobaczyć małe wyskakujące okienko. Kliknij opcję Osadź mapę w tym wyskakującym okienku:

Następnie wybierz żądany rozmiar z listy rozwijanej. A po wybraniu odpowiedniego rozmiaru skopiuj kod z pola:

Teraz przejdź do wpisu lub strony WordPress, na której chcesz osadzić pole Mapy Google.

W edytorze WordPress przejdź do zakładki Tekst i wklej kod skopiowany z Map Google w miejscu, w którym ma się pojawić mapa:

Teraz opublikuj swój post jak zwykle i powinieneś zobaczyć pole Map Google na interfejsie witryny WordPress:

Wystarczająco łatwe, prawda?

Możesz również użyć podobnej metody, aby osadzić wskazówki Google Maps w WordPress. Jedyną różnicą jest interfejs startowy. Zamiast od razu widzieć przycisk Udostępnij , musisz kliknąć ikonę hamburgera i wybrać opcję Udostępnij lub umieść mapę :

Jak osadzić mapy Google z wieloma znacznikami lokalizacji w WordPress?

Jeśli chcesz osadzić w WordPressie pole Google Maps z wieloma znacznikami lokalizacji, sytuacja wygląda nieco inaczej.

Chociaż w następnej sekcji pokażę Ci dwie wtyczki Google Maps WordPress, które pomogą Ci to osiągnąć, w rzeczywistości nie potrzebujesz do tego wtyczki .

Zamiast tego możesz utworzyć własną mapę za pomocą Moich Map Google, a następnie osadzić tę mapę w WordPress, używając metody podobnej do opisanej powyżej.

Aby rozpocząć, przejdź do Moich Map Google i kliknij Rozpocznij , aby uruchomić interfejs. W interfejsie kliknij opcję Utwórz nową mapę :

Następnie użyj interfejsu do zbudowania mapy. Rozpoczęcie pracy może być trochę trudne – ale kiedy już opanujesz rzeczy, jest całkiem łatwy w użyciu. Możesz wyszukiwać rzeczy za pomocą pola wyszukiwania, a znaczniki możesz dodawać na mapie za pomocą przycisku Marker :

Gdy będziesz zadowolony z mapy, kliknij ikonę trzech kropek u góry i wybierz Umieść w mojej witrynie .

Następnie, tak jak poprzednio, możesz wkleić kod udostępniony przez Mapy Google na karcie Tekst edytora WordPress, aby wyświetlić mapę w witrynie WordPress.

Wtyczki WordPress, które pomogą Ci jeszcze bardziej pracować z Google Maps

Chociaż tak naprawdę nie potrzebujesz wtyczki do obsługi podstawowego osadzania Google Maps, jak pokazałem powyżej, wtyczki mogą się przydać, jeśli potrzebujesz większej elastyczności (lub jeśli chcesz bardziej przyjaznego dla użytkownika sposobu wdrożenia tej elastyczności).

Większość wtyczek tak naprawdę nie robi niczego, czego nie mógłbyś zrobić sam z wystarczającą ilością smaru na łokciach - ale sprawiają, że jest to o wiele łatwiejsze i bardziej przyjazne dla użytkownika. Oto kilka fajnych wtyczek, które pomogą Ci lepiej pracować z Mapami Google.

Mapy Google WP

WP Google Maps to najpopularniejsza darmowa wtyczka Google Maps w katalogu wtyczek WordPress.org.

Pomaga tworzyć własne niestandardowe ekrany Map Google przy użyciu wybranych znaczników mapy i różnych motywów map. Zasadniczo jest to bardziej przyjazna dla użytkownika implementacja procesu, który właśnie opisałem powyżej.

Jedynym minusem jest to, że darmowa wersja umożliwia tworzenie tylko jednej mapy. Jeśli potrzebujesz wielu map, musisz kupić wersję premium lub skorzystać z innego rozwiązania.

Aby rozpocząć, zainstaluj i aktywuj WP Google Maps. Ponieważ jest wymieniony na WordPress.org, możesz to zrobić bezpośrednio z pulpitu WordPress.

Po aktywacji przejdź do nowej opcji Mapy na pasku bocznym, aby rozpocząć.

Zanim jednak utworzysz swoją pierwszą mapę, musisz uzyskać klucz Google Maps JavaScript API Key i wprowadzić go w ustawieniach wtyczki. Możesz to zrobić, postępując zgodnie z tymi instrukcjami:

Po wprowadzeniu klucza API możesz edytować domyślną Moja pierwsza mapa ( pamiętaj – darmowa wersja tej wtyczki pozwala na utworzenie tylko jednej mapy ):

Użyj interfejsu, aby zbudować swoją mapę. Następnie, kiedy skończysz, możesz umieścić go w dowolnym miejscu w swojej witrynie, używając skrótu:

To bardzo proste i elastyczne – jedynym minusem jest ograniczenie jednej mapy w darmowej wersji.

Kreator Map

Inną dobrą opcją tworzenia osadzonych Map Google za pomocą wtyczki WordPress jest Maps Builder.

Po zainstalowaniu i aktywowaniu wtyczki na pasku bocznym pulpitu nawigacyjnego pojawi się nowa karta Mapy Google . Podobnie jak w przypadku WP Google Maps, musisz dodać klucz API Map Google, zanim zaczniesz korzystać z wtyczki.

Gdy to zrobisz, możesz przejść do Map Google → Dodaj nowy , aby zbudować nową mapę. W tym interfejsie kliknij przycisk Open Map Builder , aby uruchomić przyjazny dla użytkownika interfejs:

Tam możesz zbudować swoją mapę za pomocą paska bocznego wtyczki:

Po zakończeniu możesz użyć skrótu utworzonego przez wtyczkę, aby osadzić mapę w dowolnym miejscu na swojej witrynie WordPress.

Lokalizator sklepu WP

Jeśli chcesz używać Map Google do wyświetlania wielu lokalizacji sklepów na swojej witrynie WordPress ( powszechne pragnienie! ), być może lepiej będzie użyć dedykowanej wtyczki lokalizatora sklepów.

Chociaż możesz znaleźć kilka wtyczek, aby to zrobić, lubię WP Store Locator, ponieważ jest elastyczny i świetnie wygląda.

Użyj modułu Google Maps swojego ulubionego kreatora stron

Większość kreatorów stron WordPress zawiera dedykowany element/moduł Map Google, który pomoże Ci osadzić zawartość Map Google w swoich projektach.

Na przykład popularna wtyczka Divi Builder zawiera moduł Google Maps, który można dostosować za pomocą interfejsu wtyczki:

Jeśli więc korzystasz już z kreatora stron, sprawdź, czy Twój kreator stron ma narzędzie Mapy Google, zanim zaczniesz szukać dedykowanej wtyczki Mapy Google,

Zabawna poprawka dla zaawansowanych użytkowników

Ta metoda jest zaawansowana i wymaga znajomości kodu – więc jeśli jesteś początkującym, możesz to zignorować.

Ale jeśli znasz się na WordPressie i polach niestandardowych, możesz użyć pola niestandardowego, aby automatycznie utworzyć mapę na podstawie schematu adresów URL Map Google.

Na przykład możesz utworzyć pole na zapleczu WordPress, w którym użytkownik musi tylko wkleić adres do lokalizacji.

Następnie, po pewnym wstępnym przetworzeniu w celu usunięcia spacji, możesz wstawić ten adres w coś takiego jak poniżej w ramce iframe w plikach szablonu motywu:

I voila! Wszystko, co użytkownik musi zrobić, to wpisać adres w edytorze WordPress, a osadzanie Map Google automatycznie pojawi się na interfejsie dla tej lokalizacji.

Ponownie – ta metoda zdecydowanie wymaga podstawowej znajomości PHP i niestandardowych pól – ale jest to fajny hack, aby zaoszczędzić trochę czasu.

Zawijanie rzeczy

Niezależnie od tego, czy chcesz zrobić coś podstawowego, jak osadzić zwykłą lokalizację Google Maps w WordPress, czy też uzyskać bardziej zaawansowane funkcje dzięki wielu znacznikom map lub automatycznemu tworzeniu map, masz wiele opcji.

Aby osadzić pojedyncze mapy, prawdopodobnie możesz pominąć wtyczki i po prostu użyć zwykłego kodu do osadzania Google Maps. Ale jeśli chcesz tworzyć mapy z wieloma lokalizacjami i mieć łatwą kontrolę nad stylami, dwie wtyczki Google Maps są dobrym rozwiązaniem.

I na koniec, jeśli używasz narzędzia do tworzenia stron, zdecydowanie powinieneś sprawdzić, czy masz już element Mapy Google, zanim przejdziesz do rozwiązania zewnętrznego.