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ć.

Artur Pięciak

Produkcja strony internetowych formalnie od 2012 roku, z pasji nieco dłużej. W Lokomotywie działam w wagonie technicznym www, sklepów opartych o WooCommerce oraz w wagonie, gdzie motywem przewodnim jest Adobe Photoshop. Po godzinach muzyczny ♫ relax i kibicowanie Real Madryt :)

11 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ę 🙂

  3. MarekC pisze:

    Dziekuje bardzo , działa !

  4. Michał pisze:

    Bardzo pomocny post, dzięki!

  5. Kamil pisze:

    Faktycznie prosto, przy okazji dodałem swoją firmę do mapy i przy pinezce widnieje jej nazwa.
    Dzięki!

  6. Ania pisze:

    A jak z mapami z innego źródła typu open source? Czy tak samo prosto można to zrobić, bo Google pobiera haracz?

  7. Monika pisze:

    Również dziękuję za poradnik. Mapka wstawiona błyskawicznie. Bardzo fajnie, bez żadnych wtyczek (bez spowolnień WP). Pozdrawiam! 🙂

  8. Osobiście wybieram OSM mapy bo google są trochę mniej dokładne w instalacjach turystycznych. Open street maps tak samo dodaje jak google też kodem. No i zaletą jest to że szybciej działają.

  9. M pisze:

    Hmmm, a jak to wygląda na mobilnych jak na sztywno ustawiam rozwiar? 😉

Dodaj komentarz

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