Jeżeli chcesz mieć na swojej stronie opartej o WordPress mapę, która pokaże Twoim klientom gdzie jesteś to świetnie trafiłeś! W tym poradniku w kilku krokach pokażemy Ci jak wstawić całkowicie darmową mapę na swoją stronę wraz ze znacznikiem i dymkiem z informacjami o adresie. Potrzebna będzie napisana przez nas wtyczka OSmapper.

Ważne!

Używanie mapy nie wiąże się z dodawaniem żadnych kluczy API, ani nie ma nałożonych żadnych limitów wyświetleń jak to ostatnio ma miejsce z mapami od Googla. Jeśli na Twojej stronie pojawił się błąd z używaniem mapy podobny do tego niżej:

To zalecana jest zmiana mapy albo dodania klucza API po wcześniejszym oddaniu karty kredytowej i ustaleniu limitów w platformie Google Developers

Jak dodać mapę na stronę?

  1. Pobieramy wtyczkę w zwyczajny sposób wpisując OSMapper.
  2. Po zainstalowaniu wtyczki najeżdżamy myszką na nowy element pasku bocznego “map”, który dopiero się pojawił (jeżeli go nie widzimy odświeżmy stronę).
  3. Po kliknięciu przechodzimy do widoku wtyczki. Na początku ustawiamy tytuł mapy, oraz podajemy adres, który chcemy pokazać na mapie. W pole “Street name and number” wpisujemy ulicę i numer budynku, w “City” miasto, podajemy też kod pocztowy w “Zip code”. Następnie wybieramy z prawej strony kolor i rodzaj pinezki. Na koniec pobieramy koordynaty mapy klikając “Get coordinates” (możemy też wpisać je ręcznie) a później “Opublikuj”. Po naciśnięciu “Get coordinates” w przypadku naszego adresu zobaczyliśmy komunikat o nieznalezieniu koordynat dla podanego adresu. Niestety OpenStreetMaps nie ma aż tak dobrego geolokalizatora jak google, ale działa on poprawnie i znajduje większość adresów. Na szczęście nasza wtyczka umożliwia
    skorygowanie błędnie odnalezionego adresu.
  4. Obecnie powinniśmy widzieć mapę z zaznaczonym punktem na mapie. W naszym przypadku geolokalizacja nie zadziałała idealnie dlatego poprawimy ją ręcznie. W tym celu przybliżamy mapę, klikamy na pinezkę i cały czas ją trzymając przeciągamy w poprawne miejsce. Na koniec naciskamy przycisk publikuj.
  5. Na koniec pozostaje nam jeszcze zdecydować gdzie chcemy wyświetlić naszą mapę. W tym celu klikamy na ikonkę “Map” w bocznym menu z lewej strony. Powinniśmy przejść do widoku przypominającego listowanie stron, czy wpisów. Następnie kopujemy tekst z pola oznaczonego jako “Shortcode”.
  6. Po skopiowaniu tego tekstu wystarczy wkleić go w treść stronybądź, postu na którym chcemy wyświetlić mapę. Ja wkleję go do wcześniej przygotowanej strony “Kontakt”, która zawiera moje informacje kontaktowe. Mapa pojawi się w miejscu, w którym została wklejona – jeżeli wkleili byśmy ten kod ponad tekstem, pojawiłaby się nad nim.
  7.  Sprawdzamy jeszcze, czy mapa wyświetliła się poprawnie.

To wszystko! Jeżeli chcemy możemy na mapie dodać również dymek, który wyświetli się po najechaniu na pinezkę. Poza tym istnieje również płatna wersja wtyczki dzięki której możemy dodać więcej pinezek, więcej map, mamy więcej opcji modyfikacji mapy i wiele więcej.

Wróć do poprzedniej strony
Autor:
Arkadiusz Wawrzyniak
O autorze
Zajmuje się tworzeniem frontendu i kodowaniem motywów Wordpressowych. Kiedy coś nie działa wciąż krzyczy "wciśnij control F5"! W wolnych chwilach lubi oglądać dobre filmy i grać w gry planszowe.
Kategorie: