Jak dodać mapę Google do Wordpress?

Zaczynając przygodę z systemem WordPress podczas budowy strony internetowej, potrzebowaliśmy wstawić Mapę Google Map na podstronieKontakt“. Mapa była już wygenerowana i nie było możliwości pozyskać dla tej konkretnej mapy kodu API, który to potrzebny był wówczas do uruchomienia wtyczki.

Na szczęście leniwa natura po 10 pluginie tego typu odkrył dużo łatwiejszy sposób bez zabawy w zbędne dodatki w postaci wtyczek GoogleMap, generowanie kodu API i inne cuda jakie do tej pory pojawiały się na wszystkich forach.

 

Wchodzimy na Google Maps i namierzamy adres

Pierwszym krokiem jest skorzystanie z adresu: http://maps.google.pl. Jeżeli wiesz jak utworzyć kod HTML dla swojej strony internetowej – przejdź automatycznie do tryb HTML.

Następnie obieramy naszą pozycję mapy, którą chcemy wstawić na stronę. W naszym przykładzie posłużymy się ulokowaniem rynku w Poznaniu.

W tym celu wpisuje: “Stary Rynek, Poznań“, dokonuje odpowiedniego zbliżenia tak jak na poniższym screenie:

screenshot1
Jeżeli pinezka wbita przez Google pokazuje złe miejsce wówczas pomagamy sobie ustalić dane GPS poprzez dodatkową stronę: https://www.latlong.net/

Wtedy oczywiście adekwatnie do danych długość/szerokość w wygenerowanym linku, o którym za moment należy podmienić na dane z w/w linku.

 

Kopiujemy kod HTML mapy Google

Jeżeli mamy nasz “Cel” przechodzimy do generowania kodu HTML dla naszej strony internetowej. Klikamy przycisk “Link“, który znajduję się obok mapy.

Następnie kopiujemy kod znajdujący się pod opisem: “Wklej kod HTML do swojej strony internetowej“. Sytuację obrazuję na poniższym screenie:

 

screenshot2
 

Tryb HTML

Jeżeli mamy zapisany już kod HTML nie pozostaje nic innego jak tylko zalogować się do naszego panelu WordPress – utworzyć stronę lub wpis i w pierwszej kolejności ustawić tryb widoku na “HTML“. Będąc w trybie HTML dodajemy następujący kod: <code> … </code>

EDIT 2018: Obecnie nie musi być już to objęte znaczkiem <code> … </code> i możemy wkleić bezpośrednio cały kod.

W miejsce kropek natomiast wklejamy nasz cały wcześniej pozyskany kod HTML. Sytuację obrazuję na poniższym zrzucie ekranu:

screenshot3
 

Poniżej efekt końcowy, bez wtyczek, bez generowania API i w ogóle jest fajnie szybko i konkretnie:

W kodzie tym można za sprawą parametrów “width” oraz “height” dostosować rozmiar naszej mapy do naszej strony.

 

Jak widać z perspektywy czasu 5 lat od tamtej pory za dużo się nie zmieniło. Sporo płatnych szablonów posiada pole to wpisania tylko współrzędnych zamiast wklejania całego kody co jest często sporym ułatwieniem – więc tutaj warto wykorzystać tylko link do serwisu LatLong. Korzystając z tej opcji Google również nie wymaga aby strona zawierała odnośni do API Google Maps, który na przełomie 2017/2018 zaczął funkcjonować i gdzie bez dodatkowej linijki kodu nieaktualne wtyczki / motywy mapy przestają działać.

2 Comments

  1. Jureck pisze:

    Fajny, prosty sposób, spróbuje wprowadzić u siebie:) Pozdrawiam

  2. daria pisze:

    To nie jest takie trudne, a pomaga promować firmę 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *