Szukasz sposobu na osadzenie zawartości WordPress Google Maps na swojej stronie?

Podobnie jak wiele rzeczy w WordPressie, istnieje kilka różnych sposobów, na które możesz osadzić Google Maps na swojej stronie w zależności od tego, jaki rodzaj zawartości mapy chcesz uwzględnić.

W tym poście zaczniemy od pokazania, jak dodać Google Maps w WordPress bez wtyczki. Następnie polecimy Ci kilka wtyczek, które pomogą Ci osadzić Mapy Google, a także niektóre z korzyści płynących z takiego podejścia. Będziemy również nurkować, jak prawidłowo korzystać z Google Maps API, który jest teraz wymagane.

Wreszcie, będziemy kończyć z niektórych względów wydajności do korzystania z Google Maps na WordPress i podzielić się kilkoma wskazówkami, jak utrzymać witrynę WordPress ładowanie szybko, nawet jeśli trzeba osadzić Google Maps.

Możesz kliknąć poniżej, aby przejść bezpośrednio do konkretnej sekcji lub po prostu przeczytać przez całą rzecz.

• Google Maps API jest teraz wymagane
• Jak dodać Mapy Google w WordPressie bez wtyczki
• Wtyczki WordPress Google Maps, które dają Ci większą elastyczność
• Efekt wydajności Map Google i wskazówki, jak poprawić wydajność

Google Maps API jest teraz wymagane

Od 11 czerwca, 2018, klucz API jest teraz wymagany dla Google Maps. Jeśli już wdrożyłeś Mapy Google na swojej stronie i nie działa ona już dłużej, może to być przyczyną. A raczej brakuje Ci klucza API. Dobrą wiadomością jest to, że dla 99% z Was, powinno to być nadal darmowe. Poniżej znajduje się wycena API Google Maps.

Cena API Google Maps

Google daje również powtarzający się kredyt w wysokości 200$ na koncie rozliczeniowym każdego miesiąca, aby zrównoważyć koszty użytkowania. Jak więc widać, o ile nie generujesz tysięcy żądań, korzystanie z Map Google na swojej stronie nie powinno Cię nic kosztować.

Co jeszcze się zmieniło? Nic, ale teraz będziesz musiał wykonać następujące czynności, jeśli chcesz korzystać z Google Maps w WordPressie:

1. Zaloguj się do konta Google Cloud Platform Console i skonfiguruj je.
2. Dodaj swoje dane rozliczeniowe, nawet jeśli możesz nigdy nie być rozliczany.
3. Dodaj klucz API do swojego kodu osadzonego Google Maps lub ustawień wtyczki.

Jak uzyskać klucz API Google Maps

Poniżej znajdują się kroki, jak uzyskać klucz API Google Maps.

Krok 1

Przejdź do Google Cloud Platform Console. Jeśli nie masz jeszcze konta, załóż je, to nic nie kosztuje.

Krok 2

Wybierz lub utwórz projekt.

Krok 3

Załóż konto rozliczeniowe. Mimo, że będą wymagać karty kredytowej, nigdy nie powinieneś zostać obciążony, chyba, że przekroczysz wysokie limity użytkowania.

Krok 4

Zostaniesz poproszony o wybranie jednego lub więcej produktów. Zależy to od typu mapy, której używasz. Na przykład, jeśli osadzasz mapę na swojej witrynie WordPress bez wtyczki (jak pokazano w krokach poniżej), wybierzesz Google Maps Embed API.

Google Maps Embed API

Jeśli używasz wtyczki, takiej jak Google Maps Widget (jak pokazano w krokach poniżej), wtedy wybrałbyś Google Maps Static API.

Jeśli używasz wtyczki lub motywu innej firmy, powinny one mieć dokumentację na temat tego, jakiego typu wdrożenia Map Google używają. Nie martw się, zawsze możesz dodać wiele typów i zmienić je później.

Krok 5

Kliknij „Włącz.”

Włącz Google Maps API

Krok 6

Kliknij na „API”, a następnie pod „Credentials”, zobaczysz swój klucz API.

Klucz API Map Google

Krok 7

Jeśli po prostu osadzasz swój klucz API Map Google, będzie on wyświetlany w postaci zwykłego tekstu w kodzie źródłowym. Dlatego powinieneś to ograniczyć, w przeciwnym razie ludzie mogliby użyć twojego klucza API na swojej stronie WordPress lub projektach i zgarnąć twoje użycie.

Aby to zrobić, po prostu kliknij na nazwę swojego klucza API i pozwoli ci to dodać ograniczenie. Dla twojej witryny WordPress, po prostu dodanie referrera HTTP powinno być wystarczająco dobre. Takie jak https://yourdomain.com/*. Pozwoli to na wykonywanie połączeń tylko w Twojej witrynie.

Google Maps API key restriction

Jak dodać Mapy Google w WordPressie bez wtyczki

Jeśli chcesz tylko osadzić prostą mapę i nie potrzebujesz bardziej szczegółowej funkcjonalności, takiej jak niestandardowe znaczniki lokalizacji lub inne adnotacje, możesz osadzić Mapy Google bez wtyczki, korzystając z normalnej strony Map Google, z której korzystasz na co dzień.

Oto jak to działa…

Krok 1: Skopiuj kod osadzania Google Maps

Aby zacząć, użyj strony Google Maps, aby utworzyć mapę, którą chcesz osadzić.

Na przykład, jeśli chcesz osadzić znacznik miejsca, otwórz to miejsce w Google Maps. Lub, jeśli chcesz osadzić wskazówki dojazdu, otwórz wskazówki w Mapach Google.

Gdy masz już mapę, którą chcesz osadzić, kliknij na menu hamburger w lewym górnym rogu:

Jak uzyskać dostęp do kodu osadzania

W liście pozycji menu wybierz opcję Udostępnij lub osadzaj mapę:

Otwórz opcje osadzania

To otworzy popup Share. W tym popupie kliknij kartę Embed a map.

Wtedy możesz wybrać żądany rozmiar za pomocą rozwijanej listy. W przypadku większości witryn WordPress domyślny rozmiar działa dobrze, ale możesz sprawić, że mapa będzie większa lub mniejsza w razie potrzeby.

Jak już to zrobisz, kliknij przycisk Kopiuj HTML, aby skopiować kod osadzenia:

Kod osadzenia Map Google

Będziesz wtedy musiał dodać swój klucz API do kodu. Więc twój kod powinien wyglądać tak:

<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&parameters allowfullscreen></iframe>

Krok 2: Dodaj kod osadzający Google Maps do witryny WordPress

Teraz wszystko, co musisz zrobić, to dodać ten kod osadzający do swojej witryny WordPress w poście lub stronie, w której chcesz zawrzeć swoją mapę.

Jeśli używasz nowego edytora bloków WordPress Gutenberg, który został wydany z WordPress 5.0, możesz to zrobić, dodając niestandardowy blok HTML i wklejając kod osadzenia do bloku. Nie zapomnij dodać swojego klucza API.

Jak dodać kod embed w edytorze bloków WordPress

Możesz wyświetlić podgląd, jak będzie wyglądać twoja mapa, klikając przycisk Podgląd nad blokiem.

Jeśli nadal używasz klasycznego edytora TinyMCE, możesz dodać kod embed Google Maps, otwierając zakładkę Tekst i wklejając tam kod:

Jak dodać kod embed w edytorze WordPress Classic

Po dodaniu kodu możesz wrócić do zakładki Visual, aby zobaczyć podgląd na żywo swojej mapy.

I to jest to! Właśnie dowiedziałeś się, jak dodać Mapy Google w WordPressie bez wtyczki.

Use Google My Maps To Embed More Complicated Maps Without A Plugin

Jeśli chcesz być bardziej kreatywny, jeśli chodzi o rzeczy takie jak wiele znaczników lokalizacji, niestandardowe adnotacje itp. nadal możesz to zrobić bez potrzeby wtyczki z usługą Google My Maps.

My Maps to oficjalne narzędzie od Google, które pozwala tworzyć i udostępniać własne niestandardowe mapy. Dzięki niemu możesz stworzyć coś takiego jak poniższy przykład, z dużą ilością niestandardowych znaczników i niestandardowych informacji, które wyświetlają się, gdy użytkownik kliknie na znacznik:

Google My Maps example

Oto jak go użyć, aby dodać niestandardowe Mapy Google do WordPressa.

Zapisz się teraz

Krok 1: Utwórz swoją mapę w Google My Maps

Aby zacząć, przejdź do Google My Maps i utwórz nową mapę. Stamtąd możesz użyć interfejsu konstruktora map, aby zbudować swoją mapę:

Interfejs Google My Maps

Chociaż nie będziemy go opisywać zbyt szczegółowo, ten interfejs pozwala budować całkiem kreatywne mapy. Aby uzyskać więcej informacji, ten artykuł pomocy od Google zawiera wiele ważnych funkcji.

Krok 2: Wygeneruj kod osadzający

Jak już skończysz budować swoją mapę, musisz wygenerować kod osadzający.

Zanim jednak będziesz mógł uzyskać ten kod, musisz najpierw upublicznić swoją mapę. Aby to zrobić, kliknij na przycisk Udostępnij. Następnie kliknij Zmień… w oknie podręcznym:

Google My Maps Sharing Settings

Następnie wybierz On – Public on the web i kliknij Save:

Turn on Link Sharing

Jak już to zrobisz, kliknij na rozwijane menu w pobliżu tytułu Twojej mapy i wybierz Embed on my site, aby wygenerować rzeczywisty kod osadzenia:

Access the My Maps embed code

To otworzy popup z kodem, który powinieneś skopiować. Nie zapomnij dodać swojego klucza API.

Kod embed My Maps

Krok 3: Dodaj kod embed do witryny WordPress

Teraz możesz dodać ten kod embed do swojej witryny WordPress tak samo, jak kod embed, który otrzymasz z regularnej witryny Map Google.

Jeśli nie jesteś pewien, jak to zrobić, kliknij tutaj, aby przejść do tej sekcji samouczka z góry.

Użyj wtyczki WordPress Google Maps zamiast

Poza ręcznymi metodami powyżej, istnieją również tony wtyczek WordPress Google Maps, które mogą pomóc Ci osadzić mapy w Twojej witrynie.

Istnieje kilka powodów, dla których warto rozważyć jedną z tych wtyczek nad metodami ręcznymi:

• Pozwalają one tworzyć bardziej skomplikowane mapy za pomocą prostego interfejsu.
• Możesz zrobić wszystko bez konieczności opuszczania pulpitu nawigacyjnego WordPress.
• Niektóre z nich łączą się z WordPressem. Na przykład możesz być w stanie połączyć znaczniki mapy z postami WordPress.
• Niektóre z nich mogą pomóc w optymalizacji Map Google pod kątem wydajności (więcej na ten temat później).

W przypadku wszystkich tych wtyczek będziesz musiał wygenerować własny klucz API Map Google, zanim będziesz mógł rozpocząć osadzanie map. Ten samouczek pokazuje, jak to zrobić.

Google Maps Widget

Google Maps Widget to prosta wtyczka Google Maps, która pozwala osadzić mapę za pomocą Google Maps Static API, która oferuje bardziej przyjazne dla wydajności podejście poprzez osadzenie statycznego obrazu zamiast interaktywnej mapy (wyjaśnimy więcej na ten temat w następnej sekcji).

Jest to świetna opcja, jeśli chcesz czegoś prostego i lekkiego. Po aktywowaniu go będziesz musiał złapać swój klucz API Google Maps i podłączyć go do ustawień wtyczki. Możesz dodać Mapę Google do dowolnego obszaru widgetu w swojej witrynie. Następnie odwiedzający mogą otworzyć większą interaktywną wersję mapy w lightboxie:

Interfejs Google Maps Widget

Możesz również od razu użyć interaktywnej mapy, jeśli jest to pożądane, a wersja Pro pozwala osadzać mapy w dowolnym miejscu w witrynie za pomocą shortcode.

Google Maps Easy

Google Maps Easy pomaga tworzyć niestandardowe mapy z własnymi markerami i adnotacjami.

Gdy dodajesz markery, masz możliwość przesyłania własnych niestandardowych ikon, dołączania tekstu i obrazów do opisu markera i wielu innych. Możesz także kontrolować sposób działania swojej mapy, na przykład wybierając, czy pozwolić użytkownikom na powiększanie, czy nie:

Google Maps Easy interface

Po zbudowaniu mapy możesz ją osadzić za pomocą shortcode lub funkcji PHP.

Intergeo

Intergeo to kolejna popularna opcja, która pozwala tworzyć własne mapy z niestandardowymi markerami i mieć kontrolę nad funkcjonalnością mapy.

Gdy zainstalujesz i aktywujesz wtyczkę, będziesz mógł budować swoje mapy bezpośrednio z pulpitu nawigacyjnego WordPress:

Intergeo interface

Wtedy możesz osadzić je w dowolnym miejscu w swojej witrynie za pomocą shortcode.

Gutenberg Block For Google Maps Embed

Gutenberg Block For Google Maps Embed to prosta wtyczka, która dodaje dedykowany blok Google Maps do nowego edytora bloków WordPress Gutenberg.

Dzięki temu blokowi możesz osadzić dowolny adres, a także wybrać:

• Wymiary
• Poziom powiększenia
• Mapa interaktywna vs mapa statyczna (ponownie, ta ostatnia metoda pomaga w wydajności)

Nie pozwoli ci to na tworzenie własnych niestandardowych map – ale jest to wygodna opcja, jeśli używasz nowego edytora bloków i po prostu chcesz łatwego sposobu na dołączenie kilku prostych map.

Mapy Google mogą spowolnić twoją witrynę WordPress – nie pozwól na to

Ponieważ Mapy Google pozwalają na osadzenie tony fajnych funkcji w twojej witrynie z interaktywnymi mapami, istnieje kompromis wydajności, ponieważ muszą załadować dużą liczbę skryptów, aby zasilić wszystkie te interaktywne funkcje.

Długa historia w skrócie, osadzanie interaktywnych Map Google może spowolnić twoją witrynę.

Jest kilka sposobów, aby to zwalczyć.

Po pierwsze, jeśli nie potrzebujesz, aby ludzie byli w stanie interaktywnie przeglądać mapę na swojej stronie, prostym sposobem na przyspieszenie rzeczy bez żadnych narzędzi firm trzecich jest:

• Zrób zrzut ekranu mapy, aby użyć jej na swojej stronie
• Połącz ten zrzut ekranu z mapą na stronie Map Google, lub otwórz wyskakujące okienko z interaktywną mapą, gdy użytkownik kliknie.

W ten sposób Twoja witryna ładuje tylko zwykły obraz – nie wszystkie skrypty związane z Google Maps.

Jako alternatywę dla robienia tego ręcznie, możesz również użyć darmowej wtyczki AWEOS Google Maps iframe load per click. Ta wtyczka automatycznie zastępuje embedy Google Maps z generycznym obrazem zastępczym. Następnie, jeśli użytkownik kliknie przycisk Załaduj mapę, załaduje on pełny embed Google Maps:

Google Maps placeholder image

Or, możesz również użyć Google Maps Static API, który zwraca zwykły obraz bez żadnego JavaScript. Niektóre wtyczki Map Google – w tym Google Maps Widget i Gutenberg Block For Google Maps Embed – pozwalają korzystać ze Static API podczas tworzenia map.

Zdajemy sobie jednak sprawę, że czasami to statyczne podejście po prostu nie będzie go ciąć, a wiele osób chce od razu osadzić interaktywne doświadczenie Map Google.

Jeśli tak jest, innym dobrym sposobem na przyspieszenie Map Google jest użycie leniwego ładowania. Dzięki leniwemu ładowaniu Twoja witryna będzie czekać na załadowanie wszelkich embedów Google Maps, aż odwiedzający zaczną przewijać stronę w dół. Dzięki temu początkowe czasy ładowania strony są szybkie, a jednocześnie pozwala ona na osadzanie interaktywnych treści Google Maps.

Pisaliśmy już o tym, jak leniwie ładować obrazy i filmy, a ten sam pomysł dotyczy Google Maps.

Istnieje kilka wtyczek, które pozwalają to zrobić. Na przykład wtyczka a3 Lazy Load pozwala na leniwe ładowanie embedów iframe, co obejmuje Google Maps:

Lazy load Google Maps

Inne opcje to:

• BJ Lazy Load
• Lazy Load by WP Rocket
• Easy Lazy Loader

Podsumowanie

Jeśli chcesz tylko osadzić prostą mapę w swojej witrynie, możesz dodać Mapy Google do WordPressa bez wtyczki za pomocą wbudowanej funkcji kodu osadzania. Lub możesz użyć narzędzia Google My Maps, aby utworzyć własną mapę i osadzić ją.

Poza tymi ręcznymi metodami, istnieje również wiele wtyczek Google Maps WordPress, które mogą dać Ci wiele kontroli bez konieczności opuszczania pulpitu nawigacyjnego WordPress.

Niezależnie od wybranej metody, zwróć uwagę na wpływ wydajności korzystania z Map Google. Staraj się korzystać z Map Google tylko wtedy, gdy jest to absolutnie konieczne i rozważ taktyki, takie jak obrazy placeholder lub leniwe ładowanie, aby zmniejszyć negatywny wpływ na wydajność.

Czy masz jakieś inne pytania dotyczące korzystania z Map Google na WordPressie? Daj nam znać w komentarzach!