Potrzebuje Pan/Pani interaktywnej mapy na stronie WordPress, a standardowe Google Maps już nie wystarczają? Standardowy iframe z mapą nie daje klikalnych regionów, dymków z podpowiedziami ani filtrowanego katalogu obiektów. A klient prosi o mapę z wyszukiwaniem adresów i kolorowaniem regionów pod statystyki.

MapSVG, jedna z niewielu wtyczek WordPress, która zamyka to wszystko w jednym narzędziu. Korzysta z niej ponad 16 000 witryn, a darmowa wersja na WordPress.org pozwala wypróbować prawie wszystkie podstawowe funkcje bez opłat. Poniżej szczegółowy przegląd możliwości, praktyczny poradnik konfiguracji i uczciwy werdykt: komu wtyczka się przyda, a kto powinien poszukać alternatywy.

💡 Szybki przegląd:

• Proszę wgrać gotową mapę SVG z wbudowanej biblioteki lub własny plik.
• Proszę powiązać obiekty bazy danych z polami niestandardowymi z regionami.
• Proszę skonfigurować tooltipy i okna popover za pomocą edytora szablonów.
• W razie potrzeby proszę nałożyć mapę wektorową na Google Maps.
• Proszę wstawić shortcode na stronę i sprawdzić wynik.

Co potrafi MapSVG: przegląd kluczowych możliwości

Wtyczkę rozwija Roman Stepanov (RomanCode na WordPress.org). Projekt istnieje od 2012 roku i jest aktywnie aktualizowany: na czerwiec 2026 aktualna wersja to 8.6.6, w changelogu widać po kilka wydań miesięcznie. To ważne dla wtyczki współpracującej z Google Maps API, bez regularnych aktualizacji mapy psują się przy każdej zmianie klucza API.

Ponad 100 gotowych map z geokalibracją

Wtyczka jest dostarczana z biblioteką ponad 100 geokalibrowanych map SVG. Mapa świata jest już podzielona na klikalne kraje. Osobno dostępne są mapy państw z podziałem na stany, prowincje i regiony. Jest też kilka map specjalnych.

Geokalibracja oznacza, że każdy obszar mapy jest powiązany z rzeczywistymi współrzędnymi. Może Pan/Pani dodawać znaczniki według adresu lub szerokości/długości geograficznej, trafią one dokładnie na właściwy region. Nie znalazł Pan/Pani odpowiedniej mapy w bibliotece? Proszę narysować SVG w Inkscape lub Adobe Illustrator, wgrać do MapSVG, a wtyczka przekształci wektor w interaktywną mapę z klikalnymi strefami.

Obiekty bazy danych z polami niestandardowymi

To cecha wyróżniająca MapSVG spośród większości wtyczek WordPress do map. Tworzy Pan/Pani wpisy (obiekty) we wbudowanej bazie danych wtyczki, z dowolnym zestawem pól: tekst, liczba, obraz, checkboxy, listy rozwijane. Następnie wiąże Pan/Pani obiekt z konkretnym regionem mapy.

Przykład: agencja nieruchomości dodaje obiekty, domy z adresem, ceną, powierzchnią i zdjęciami. Każdy obiekt jest przypisany do regionu na mapie. Odwiedzający klika obszar i widzi kartę obiektu w estetycznym oknie pop-up, widoku szczegółowym lub tooltipie. Żadnej zewnętrznej wtyczki do przechowywania danych, wszystko wewnątrz MapSVG.

Katalog z filtrowaniem i wyszukiwaniem

Obiekty bazy danych można wyświetlić nie tylko na mapie, ale także w formie filtrowanego katalogu obok niej. Użytkownik wpisuje zapytanie w pasku wyszukiwania lub wybiera wartość z filtra rozwijanego, katalog i mapa aktualizują się synchronicznie. Kliknięcie regionu mapy filtruje katalog i odwrotnie.

W wersjach premium dodawane są filtry według kategorii, kodu pocztowego, daty. Jest wsparcie dla importu z CSV, a począwszy od planu Plus, pobieranie danych bezpośrednio z Google Sheets (źródło jest aktualizowane, mapa aktualizuje się automatycznie).

Nakładanie map wektorowych na Google Maps

Standardowe Google Maps przez iframe praktycznie nie podlegają dostosowaniu. MapSVG rozwiązuje ten problem radykalnie: nakłada Pan/Pani własną interaktywną warstwę SVG na mapy Google dowolnego typu, satelitarną, terenową, schematyczną, hybrydową. Potrzebny jest tylko klucz Google Maps API.

Warstwa wektorowa jest w pełni klikalna: strefy, znaczniki, tooltipy działają jak na zwykłej mapie SVG. Rezultat to mapa, która wygląda jak Google Maps, ale zachowuje się jak w pełni niestandardowa aplikacja webowa. Podświetlanie punktów orientacyjnych, interaktywne trasy i regiony, wszystko można skonfigurować.

Wbudowane edytory CSS, JavaScript i szablonów Handlebars

Dla osób pracujących z kodem MapSVG oferuje trzy wbudowane edytory. Edytor CSS: zmienia Pan/Pani style podpowiedzi, wyskakujących okienek, znaczników i widzi wynik w czasie rzeczywistym. Edytor JavaScript: podłącza się Pan/Pani do zdarzeń mapy (kliknięcie regionu, najechanie kursorem), pisze logikę middleware. Edytor szablonów Handlebars: w pełni kontroluje Pan/Pani strukturę HTML podpowiedzi, okien popover i widoku szczegółowego.

W praktyce oznacza to: szablon podpowiedzi ze zdjęciem, ceną i przyciskiem „Więcej szczegółów" tworzy się w pięć minut. A przez JavaScript można na przykład przy kliknięciu regionu wysyłać zapytanie AJAX i dynamicznie doładowywać dane.

Panel sterowania z podglądem w czasie rzeczywistym

Interfejs MapSVG to własny panel wewnątrz panelu administracyjnego WordPress. Tworzenie mapy to proces krok po kroku: wybór źródła, konfiguracja regionów, kolory, podpowiedzi, publikacja. Wszystkie zmiany są natychmiast widoczne w oknie podglądu, nie trzeba zapisywać i odświeżać strony, aby zobaczyć rezultat.

Nawigacja odbywa się przez rozwijane menu z sekcjami (Regions, Colors, Templates, Settings). Dla początkującego interfejs może wydawać się przeładowany, jest wiele opcji, ale po pierwszej godzinie pracy logika staje się zrozumiała.

Mapy z obrazów rastrowych

MapSVG potrafi pracować nie tylko z wektorowymi SVG, ale także ze zwykłymi PNG i JPEG. Wbudowane narzędzia do rysowania pozwalają obrysować obszary na obrazie rastrowym, a stają się one klikalnymi strefami. Otwiera to scenariusze, których nie da się zrealizować mapą wektorową: interaktywne plany pięter, schematy rozmieszczenia miejsc, rysunki techniczne, trasy i plany miast.

Technicznie bierze Pan/Pani zdjęcie planu budynku, obrysowuje pomieszczenia narzędziem „Draw Region", dodaje etykiety i otrzymuje interaktywny plan, gdzie po kliknięciu pomieszczenia pokazuje się informacja o nim. Klienci z branży eventowej i nieruchomości to docenią.

Praktyczny poradnik: instalacja i tworzenie pierwszej mapy

Instalacja MapSVG niczym nie różni się od instalacji każdej innej wtyczki WordPress. Różnica tkwi w procesie tworzenia mapy: tutaj potrzeba co najmniej jednego przejścia przez menu, aby zrozumieć logikę interfejsu. Potem wszystko pójdzie jak z płatka.

Krok 1. Instalacja wtyczki

Proszę pobrać MapSVG z WordPress.org (bezpłatna wersja Lite) lub zakupić wersję premium na mapsvg.com. Następnie w panelu administracyjnym WordPress: Wtyczki → Dodaj nową → Wyślij wtyczkę na serwer.

Proszę kliknąć Wyślij (1), wybrać plik ZIP wtyczki (2) i Zainstaluj teraz (3):

Proszę poczekać na zakończenie instalacji i aktywować:

Gotowe. W bocznym menu panelu administracyjnego pojawi się pozycja MapSVG, proszę do niej przejść.

Krok 2. Tworzenie mapy z gotowego szablonu

Na ekranie startowym panelu MapSVG dostępne są opcje: wybrać gotową mapę, utworzyć mapę Google (po wklejeniu klucza API), zbudować mapę obrazkową, przesłać własny plik SVG lub załadować plik SVG na mapę Google. Linki Tutorials oraz Support w górnej części panelu prowadzą do dokumentacji i wsparcia technicznego.

Proszę wybrać opcję New SVG Map i znaleźć potrzebną mapę na rozwijanej liście. Dla przykładu weźmiemy mapę Chin, jest ona podzielona na prowincje i w pełni gotowa do pracy.

Na następnym ekranie proszę wypełnić tytuł mapy. Tutaj konfiguruje się również rozmiar, responsywność (domyślnie włączona), podpowiedzi i okienka. Regiony są już klikalne, mapa jest gotowa do dostosowania.

Krok 3. Konfiguracja kolorów

Proszę przejść do Menu → Colors. Paleta kolorów umożliwia ustawienie kolorów regionów, tła, obrysu oraz stanów (hover, active). Nie ma żadnych ograniczeń, można wybierać dowolne odcienie.

Po ustawieniu kolorów proszę kliknąć Zapisz Ctrl + S:

Mapa natychmiast zmieniła kolory w oknie podglądu. Kilka kliknięć i schemat kolorystyczny jest gotowy.

Krok 4. Dodawanie podpowiedzi

Proszę utworzyć szablon tooltipa. Proszę przejść do Menu → Templates → Region Tooltip. W edytorze szablonów Handlebars dostępny jest tag {{title}}, który wyświetla nazwę regionu. Podstawowy szablon:

1
Регион: <strong>{{title}}</strong>

Proszę kliknąć Zapisz Ctrl + S. Następnie proszę włączyć podpowiedzi: Menu → Ustawienia → Etykiety narzędzi.

Teraz po najechaniu kursorem na region pojawia się podpowiedź z jego nazwą. To jest scenariusz podstawowy. Aby dodać do podpowiedzi zdjęcia, ceny i inne dane, potrzebne będą pola niestandardowe.

Krok 5. Pola niestandardowe przez obiekty bazy danych

MapSVG umożliwia dodawanie dowolnych pól do regionów. Typy pól: tekst, textarea, checkbox, obraz i inne. Stwórzmy pole dla obrazów.

Proszę przejść do Menu → Regiony i kliknąć Edytuj pola:

Proszę kliknąć przycisk Obraz, aby dodać pole typu „obraz", a następnie Zapisz pola:

Proszę nie zapomnieć kliknąć Zapisz Ctrl + S. Następnie proszę przełączyć się na zakładkę Lista:

Proszę włączyć tryb Edytuj regiony i kliknąć żądany region (na przykład Nei Mongol). Po prawej stronie pojawi się nowe pole Obrazy. Proszę kliknąć Przeglądaj:

Proszę dodać obraz przez bibliotekę mediów WordPress i kliknąć Wybierz obraz:

System przekieruje Pana/Panią z powrotem do ekranu edycji regionu. Proszę kliknąć OK (1), następnie Zapisz Ctrl + S (2) i przełączyć się z powrotem do trybu Podgląd (3):

Obraz został dodany, ale na razie nie pojawi się w podpowiedzi, ponieważ należy zaktualizować szablon. Proszę przejść do Menu → Szablony → Podpowiedź regionu i zastąpić kod:

1
Регион: <strong>{{title}}</strong><br />
2
Первое изображение:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
Все изображения:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Proszę zapisać szablon. Teraz po najechaniu na Nei Mongol podpowiedź pokazuje wczytane obrazy:

Krok 6. Publikacja mapy na stronie

Proszę zapisać wszystkie zmiany. Proszę przejść do Strony → Dodaj nową, kliknąć przycisk MapSVG nad edytorem:

Proszę wybrać utworzoną mapę z listy, wtyczka wstawi shortcode [mapsvg id="17" title="China"]. Proszę opublikować stronę i sprawdzić wynik na frontendzie:

Mapa jest w pełni responsywna, na urządzeniach mobilnych regiony i podpowiedzi działają bez utraty funkcjonalności. Shortcode można wstawić do dowolnego wpisu, strony lub widżetu, mapa załaduje się poprawnie.

⁉️🤔 Często zadawane pytania

Czy do działania MapSVG potrzebny jest klucz Google Maps API?

Tylko jeśli planują Państwo korzystać z warstwy Google Maps. Do pracy z gotowymi mapami SVG z biblioteki oraz własnymi plikami SVG klucz nie jest potrzebny. Jeśli natomiast potrzebują Państwo Google Maps, proszę uzyskać klucz API w Google Cloud Console i wstawić go w ustawieniach wtyczki, proces zajmuje kilka minut.

Czy można wczytać własny plik SVG?

Tak. Rysują Państwo mapę w Inkscape lub Adobe Illustrator, zapisują jako SVG, wgrywają do MapSVG. Wtyczka sama przekształci kształty wektorowe w klikalne regiony. Jeśli mapa nie jest skalibrowana geograficznie, znaczniki według adresu nie będą działać, możliwe jest tylko ręczne rozmieszczanie.

Czym wersja płatna różni się od bezpłatnej?

Bezpłatna wersja Lite daje nieograniczoną liczbę map, znaczników, podpowiedzi, okien popover oraz pól niestandardowych. Płatne plany różnią się narastająco: Starter ($49/rok) dodaje katalog z filtrowaniem i niestandardowe szablony; Plus ($99/rok) integrację z Google Sheets, ACF i Metabox; Pro ($199/rok) klasteryzację znaczników i edycję front-end; Elite ($299/rok) REST API oraz źródła danych MySQL. Dostępne są również licencje dożywotnie: od $99 do $599.

Czy wtyczka nadaje się dla użytkownika, który nie pisze kodu?

Podstawową mapę z regionami i podpowiedziami można realnie wykonać bez kodu, interfejs jest wizualny. Jednak gdy tylko potrzebne są niestandardowe szablony podpowiedzi (Handlebars) lub stylizacja (CSS), minimalna znajomość HTML okaże się przydatna. Dokumentacja na mapsvg.com/docs jest napisana z przykładami, a wsparcie odpowiada szybko.

Czy mapy spowalniają stronę?

Nie. Mapa SVG to wektor, który waży kilobajty, a nie megabajty. Renderowanie odbywa się przez JavaScript po stronie klienta. Przy dużej liczbie znaczników (setki i tysiące) zalecamy włączenie klasteryzacji, jest ona dostępna od planu Pro.

Co ze wsparciem i aktualizacjami?

Wtyczka jest aktualizowana kilka razy w miesiącu, z changelogu na WordPress.org widać, że deweloper aktywnie poprawia błędy i dodaje funkcje. Wsparcie przez wbudowany czat bezpośrednio z panelu administracyjnego (po aktywacji). Użytkownicy w opiniach zaznaczają, że odpowiadają szybko, ale z powodu różnicy stref czasowych odpowiedź może nadejść po kilku godzinach.

Czy warto kupić MapSVG: ostateczny werdykt

MapSVG to wąsko wyspecjalizowane narzędzie, które przewyższa standardowe wtyczki Google Maps, gdy potrzebna jest prawdziwa interaktywność: klikalne regiony, filtrowane katalogi i niestandardowe podpowiedzi. Jeśli zadaniem jest „wstawić mapę dojazdu", wtyczka jest nadmiarowa. Jeśli zadaniem jest mapa nieruchomości, store locator, interaktywne statystyki według regionów lub schemat rozmieszczenia, MapSVG jest jedną z najlepszych opcji na rynku WordPress.

Bezpłatna wersja Lite pokrywa scenariusze, za które inne wtyczki już każą płacić: nieograniczona liczba map i znaczników, pola niestandardowe, podpowiedzi i okna popover. To rzadka hojność jak na model freemium, można uruchomić projekt bez budżetu i dokupić plan, gdy potrzebne będą filtry, katalog lub integracja z Google Sheets.

Nasze doświadczenie: po jednym wieczorze z dokumentacją mapa Chin z podpowiedziami i obrazami jest gotowa. Tak, interfejs nie jest intuicyjny od pierwszej minuty, jest wiele opcji i menu, ale krzywa uczenia się jest krótka. Wbudowane edytory CSS/JS/Handlebars to znalezisko dla dewelopera: nie trzeba zaglądać do plików motywu.

Jeśli szukają Państwo wtyczki map dla WordPress i nie chcą po miesiącu natknąć się na ograniczenia bezpłatnej wersji, proszę zacząć od MapSVG Lite na WordPress.org. A jeśli potrzebna jest alternatywa, proszę spojrzeć na nasz przegląd wtyczek map dla WordPress, porównaliśmy tam kilkanaście opcji do różnych zadań.