BLOGOWANIE, VADEMECUM BLOGERA, WORDPRESS, wtyczki na wordpressa

Jak w najprostszy sposób dodać mapę na stronę www? Wtyczki na wordpressa.

Jak w najprostszy sposób dodać map

 

W tym wpisie pokażę Ci 3 proste (i niewymagające skomplikowanej konfiguracji) sposoby na dodanie mapki na stronie, na której wskażesz np: lokalizację swojej firmy, lokalizację Twoich punktów sprzedażowych, albo np w ramach bloga lajfstajlowego, czy podróżniczego miesjca, które odwiedziłeś podczas wakacji.

Zapraszam na prosty tutorial, a właściwie 3 proste tutoriale pokazujące 3 rozwiązania.

 

Dlaczego w ogóle możesz potrzebować dodawać mapkę na swojej stronie?

Jeżeli prowadzisz bloga podróżniczego, lingwistycznego, czy chociażby lifestylowego i chcesz opowiedzieć o miejscach, które odwiedziłeś w czasie wakacji, albo których odwiedzenie chciałbyś polecić swoim czytelnikom.

Np tutaj: na konkretnym przykładzie z mojego bloga o Paryżu i nauce języka francuskiego, na którym oprowadzam po paryskich zabytkach i przy tej okazji wprowadzam smaczki języka francuskiego.

Tym bardziej, że w ramach tej strony stworzyłam płatny produkt, czyli krótką powtórkę z zakresu takiego smaczku francuskiej gramatyki, jakim są francuskie rodzajniki i sytuacje, w jakich je stosujemy.

Ale na przykładzie tego wpisu o paryskim Panteonie, który jest jednym z najlepiej wypozycjonowanym na tym blogu i do którego chciałam dodać mapkę, żeby czytelnik zwizualizował sobie miejsca, o których mówię w tym tekście.

 

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

 

Google Maps

Najprostszą metodą na dodanie takiej mapki jest po prostu skorzystanie bezpośrednio z Google maps, które znajdziesz pod adresem: https://www.google.com/maps:

Tutaj w wyszukiwarkę, którą znajdziesz w lewym górnym rogu wpisujesz miejsce, które chcesz zaznaczyć na mapce.

Ta metoda świetnie się sprawdza np. do pokazania, gdzie znajduje się jakieś miejsce historyczne, zabytek (dodane, żeby tak powiem odgórnie do Google Maps). Ale nie tylko….

Bo Google Maps w zasadzie wyszuka dowolny adres i wskaże go na mapie. Jeszcze przy okazji możesz sprawdzić sobie, jak wygląda zarówno dany budynek, jak i jego okolica. Czyli możesz wykorzystać Google Maps do obejrzenia na odległość danego miejsca, budynku, w którym mieści się wskazany przez Ciebie adres.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Google Maps pokaże wskazany przez Ciebie adres wyraźnym znacznikiem, a Ty dodatkowo masz podgląd danego miejsca.

Więc np szukając nieruchomości w pewnym sensie i oczywiście do pewnego stopnia możesz obejrzeć sobie je i sprawdzić jego lokalizację nie wychodząc z domu.

Teraz gdybyś chciał taką mapkę z zaznaczonym na niej wyszukiwanym przez Ciebie punktem dodać na swojej stronie, wystarczy że skorzystasz z opcji Udostępnij.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tu wybierasz zakładkę Umieszczanie mapy, w ramach której możesz dobrać wielkość mapy tj. po rozwinięciu możesz tu wybrać jej rozmiar: mały, średni, duży czy niestandardowy, gdzie możesz podać swoje wymiary mapy.

Następnie pobierasz kod html, który by kopiujesz i wklejasz na swojej stronie.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

W tym celu wchodzisz do edycji wpisu, w którym chcesz umieścić daną mapkę. Tutaj przełączasz się z trybu wizualnego na tryb tekstowy i wklejasz w wybranym przez siebie punkcie pobrany kod. A następnie już tylko zapisujesz zmiany i gotowe.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Wtyczka MapPress

Teraz jeżeli chciałbyś stworzyć mapkę, na której zaznaczysz kilka punktów równocześnie np. tak jak tutaj we wpisie o paryskim Panteonie, gdzie chciałam pokazać zarówno paryski Panteon, jak i znajdujace się w pobliżu ciekawe miejsce, o których wspominam w tekście.

Czyli jeżeli chciałbyś pokazać kilka punktów równocześnie z zastrzeżeniem, że będą to punkty znane, zadeklarowane, wpisane do Google maps, jak np. zabytki. To rozwiązanie może mieć zastosowanie na blogu podróżniczym, czy lifestylowym.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tutaj bardzo prosta w konfiguracji wtyczka MapPress:

Po zainstalowaniu i uaktywnieniu tej wtyczki:

Przechodzisz do Ustawień. Tutaj najprostszy wariant, który nie wymaga zdobycia klucza API Key Google Maps – odhaczasz zakładkę Leaflet.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

W tym momencie w ustawieniach mapy musisz odhaczyć (albo po prostu nic nie zmieniać i zachować automatyczne ustawienia) z jakich poziomów ma być aktywna opcja dodawania mapki: z poziomu wpisów, stron….

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

W zasadzie tu jeszcze możesz wybrać w jakim formacie, w jakich rozmiarach ma być generowana ta mapka (tę opcję możesz później oczywiście zmieniać).

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA
Teraz po prostu zapisujesz zmiany, żeby ruszyć z konfigurowaniem swojej pierwszej mapki.

W tym celu wchodzisz do edycji dowolnego wpisu. Tutaj pod jego treścią, a dokładnie pod oknem edycji znajdziesz zakładkę MapPress, w ramach której możesz dodać i skonfigurować nową mapę.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tutaj wystarczy kliknąć Nowa mapa po to, żeby stworzyć kolejną mapę, którą bedziesz mógł dodać do treści danego wpisu, ale również skopiować jej shortcode po to, by wykorzystać go być może i w innych miejscach: w innych wpisach, w których może nawiązujesz do danego miejsca i w których chciałbyś pokazać tę samą raz już skonfigurowaną mapkę.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tu musisz dodać tytuł mapy, możesz zmienić jej rozmiar – wybierając któraś z trzech dostępnych opcji.

No i najważniejsze: po prostu wyszukujesz punkty, które chcesz pokazać na swojej mapie.
Czyli wracając do mojego przykładu:

Zatytułowałam te moją mapę “Paryskie zabytki”.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Teraz dodaję punkty, które najbardziej kojarzą się właśnie z miejscami wartymi zwiedzenia w Paryżu, jak np Wieża Eiffla.
Więc wpisuję w wyszukiwarkę Wieżę Eiffla (takie miejsca powszechnie znane bedą wyszukiwane automatycznie). A dalej zatwierdzam.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Ten punkt już został dodany na mapie, widać go na oznaczeniach.

Teraz ponownie wracam do paska wyszukiwań, wymazuję Wieżę Eiffle i wpisuję kolejne miejsca kojarzące się z Paryżem.

Czyli dla przykładu, żeby dodać równocześnie kilka punktów na jednej i tej samej mapie, wpisuję kolejno w wyszukiwarkę różne miejsca i kolejno zatwierdzam je klawiszem Enter.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA
Teraz mogę albo znakiem minus (-) zmniejszyć, albo znakiem plus (+) powiększyć mapę tak, żeby zaznaczone na niej  punkty były widoczne jednocześnie na wybranym fragmencie mapy.

Jeżeli chciałabym edytować, albo usunąć któryś ze znaczników, wskazujących na jedno z miejsc wyszukanych na mapie, klikam na nie, tutaj mam możliwość wybrania opcji np. Usuń, albo jej dalszej edycji.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

W momencie kiedy mapa jest gotowa klikam na Zapisz.

Ale w każdym momencie mogężesz wrócić do edycji mapy – mamy tutaj pozamykane okna edycji mapę i możemy teraz mamy tutaj
Ale nawet z tego poziomu w dalszym ciągu masz możliwości dalszej edycji mapy np. dodanie do niej kolejnych punktów.
Kiedy jesteś zadowolony z Twojej mapy, wybierasz opcję Wstaw do wpisu. W tym momencie do treści wpisu zostaje dodany shortcode, który definiuje właśnie przygotowaną mapę. Co jest tu fajne możesz skopiować shortcode i również dodać go do innych wpisów, w których ta mapkę miała by zastosowanie.

Wtyczka WP GOOGLE MAPS

I teraz jeszcze jedno rozwiązanie, czyli wtyczka WP Google Maps, która reklamuje siebie jako najprostszą do użycia Google mapę.

Tę wtyczkę wykorzystałam w ramach strony mojej znajomej, która obsługuje kwatery pracownicze w Bydgoszczy.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tutaj mapa była potrzebna po to, żeby pokazać rozmieszczenie kwater: w jakich punktach Bydgoszczy firma mojej znajomej oferuje łóżka noclegowe. I konkretniej chodziło tu, żeby pokazać lokalizacje, które w zasadzienie są oficjalnie dodane do Google Maps. Czego nie udałoby się zrobić przy użyciu poprzedniej wtyczki. 

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Wtyczka WP Google Maps tutorial.

Po zainstalowaniu i włączeniu wtyczkę WP Google Map znajdziesz w panelu po lewej stronie: 

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Po pierwsze przechodzisz do opcji Map Settings – Ustawienia. Tutaj po to, żeby uprościć konfigurację tej wtyczki, żeby nie musieć zdobywać klucza API wystarczy, że wybierzesz opcję OpenLayers. A potem już tylko zapisujesz ustawienia.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

W tym momencie przechodzisz do zakładki mapy, w ramach której w wersji darmowej tej wtyczki masz możliwość stworzenia jednej mapy, którą z kolei możesz udostępniać w różnych punktach na swojej stronie i którą możesz oczywiście później dowolnie edytować, dodawać do niej kolejne punkty, które chcesz na niej pokazać.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tej mapce automatycznie zostanie przypisany shortcode, który wklejasz w dowolnym miejscu / miejscach na stronie, żeby pokazać np. umiejscowienie np Twoich punktów sprzedażowych, miejsc, gdzie można Cię znaleźć, czy jakie punkty obsługujesz na mieście.

Teraz wchodzisz do edycji mapki:

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Tu po pierwsze wybierasz rozmiary mapki.

Ja określiłam tworzoną mapę jako mapę drogową.

Dalej przychodzisz do konfiguracji swojej mapy, czyli zaznaczasz punkty, które chcesz na niej pokazać (opcja Znaczniki, gdzie wpisujesz adres – adresy, które chcesz pokazać na mapie i kolejno zatwierdzasz każdy punkt).

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

 

W zakładce Twoje znaczniki możesz określić, ile pozycji chcesz pokazać na mapie.

Tu możesz również edytować znaczniki, które już skonfigurowałes (np skorygować błędnie podany adres).

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

Kiedy skonfigurujesz swoją mapę, klikasz na zapisz mapę i pobierasz jej shortcode, który możesz umieścić w dowolnym miejscu na stronie.

Jak w najprostszy sposób dodać mapę na stronę www? WTYCZKI NA WORDPRESSA

 

Ta wtyczka w wersji darmowej pozwala na stworzenie i skonfigurowanie jednej mapy.

Gotowe.

A ja pozdrawiam serdecznie

Beata

Zapisz się na newsletter i pobierz darmowy ebook: TWOJA MARKA NA INSTAGRAMIE

O AUTORZE

Jestem blogerką, emigrantką, poczwórną mamą. Kobietą, która nie jednego w życiu doświadczyła, z niejednego pieca jadła chleb.

Od prawie 20 lat mieszkam na emigracji we Francji, w Paryżu.

Uważam, że emigracja to dobra szkoła życia i wymagająca, choć bardzo skuteczna lekcja pokory. Ale też wewnętrznej siły i zdrowego dystansu do samego siebie i momentami wystawiającej nas na próby codzienności.

Jestem tu po to, by pomóc Ci lepiej pisać, skuteczniej docierać do czytelnika, wywołać większe zaangażowanie w social mediach. Czasami rozśmieszę lub zmotywuję.

Ale równolegle do Vademecum Blogera jestem autorem kilku niezależnych miejsc w sieci.

Ponieważ wiele osób pyta się mnie, jak mimo 4 ciąży i 40 - stki na karku udało mi się zachować linię nastolatki, uruchomiłam kanał na YouTube o zdrowym gotowaniu - bezglutenowo - bezmlecznie.

Znajdziesz mnie również na blogu BeataRed.com i powiązanym z nim Instagramie, gdzie piszę bardziej osobiście o Paryżu i mojej pasji, jaką jest nauka języka francuskiego.

A jeżeli interesują Cię praktyczne porady o tym, jak budować swoją obecność w sieci zapraszam na mój kanał na You Tube z blogowymi tutorialami.

(3) Komentarze

  1. Uwielbiam te Twoje instrukcje. Nic nas nie zaskoczy w świecie internetu dzięki dobrze opisanej procedurze 🙂

  2. Zawsze się głowiłam jak to zrobić na stronie na wordpressie a tu proszę, szybko łatwo i skutecznie! dzięki za pomoc 🙂

  3. W końcu mi się udało z mappressem. Dzięki!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *


Fatal error: Uncaught wfWAFStorageFileException: Unable to verify temporary file contents for atomic writing. in /home/beatared/public_html/vademecumblogera.pl/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:51 Stack trace: #0 /home/beatared/public_html/vademecumblogera.pl/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(658): wfWAFStorageFile::atomicFilePutContents('/home/beatared/...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('livewaf') #2 {main} thrown in /home/beatared/public_html/vademecumblogera.pl/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 51