Потрібна інтерактивна карта на сайті WordPress, і стандартних Google Maps уже недостатньо? Стандартний iframe із картою не дає клікабельних регіонів, спливних підказок і фільтрованого каталогу об’єктів. А замовник просить карту з пошуком за адресами та кольоровим розфарбуванням регіонів під статистику.

MapSVG, один із небагатьох WordPress-плагінів, який закриває все це в одному інструменті. Його використовують 16 000+ сайтів, а безплатна версія на WordPress.org дає змогу спробувати майже всі базові функції без оплати. Нижче, детальний розбір можливостей, практичний посібник із налаштування та чесний вердикт: кому плагін підійде, а кому варто пошукати альтернативу.

💡 Швидкий огляд:

• Завантажте готову SVG-карту зі вбудованої бібліотеки або свій файл.
• Прив’яжіть об’єкти бази даних із довільними полями до регіонів.
• Налаштуйте тултипи та popover-вікна через редактор шаблонів.
• За потреби накладіть векторну карту на Google Maps.
• Вставте шорткод на сторінку та перевірте результат.

Що вміє MapSVG: розбір ключових можливостей

Плагін розробляє Роман Степанов (RomanCode на WordPress.org). Проєкт живе з 2012 року й активно оновлюється: на червень 2026-го актуальна версія 8.6.6, у changelog, по кілька релізів на місяць. Це важливо для плагіна, який працює з Google Maps API, без регулярних оновлень карти ламаються за кожної зміни API-ключа.

100+ Готових геокаліброваних карт

Плагін постачається з бібліотекою з понад 100 геокаліброваних SVG-карт. Карта світу вже розбита на клікабельні країни. Окремо, карти країн із поділом на штати, провінції та регіони. Є й кілька спеціальних карт.

Геокалібрація означає, що кожна область карти прив’язана до реальних координат. Ви можете додавати маркери за адресою або широтою/довготою, вони ляжуть точно на потрібний регіон. Не знайшли відповідної карти в бібліотеці? Малюєте SVG в Inkscape або Adobe Illustrator, завантажуєте в MapSVG, і плагін перетворює вектор на інтерактивну карту з клікабельними зонами.

Об’єкти бази даних із довільними полями

Це особливість, яка вирізняє MapSVG серед більшості картографічних плагінів WordPress. Ви створюєте записи (об’єкти) у вбудованій базі даних плагіна, з будь-яким набором полів: текст, число, зображення, чекбокси, випадні списки. Потім прив’язуєте об’єкт до конкретного регіону карти.

Приклад: агентство нерухомості заводить об’єкти, будинки з адресою, ціною, площею та фотографіями. Кожен об’єкт прив’язаний до регіону на карті. Відвідувач клацає по області, і бачить картку об’єкта в гарному спливному вікні, детальному поданні або тултипі. Жодного зовнішнього плагіна для зберігання даних, усе всередині MapSVG.

Каталог із фільтрацією та пошуком

Об’єкти бази даних можна вивести не лише на карті, а й у вигляді фільтрованого каталогу поруч із нею. Користувач вводить запит у рядок пошуку або вибирає значення з випадного фільтра, каталог і карта оновлюються синхронно. Клік по регіону карти фільтрує каталог, і навпаки.

У преміум-версіях додаються фільтри за категоріями, поштовим індексом, датою. Є підтримка імпорту з CSV, а починаючи з тарифу Plus, підтягування даних безпосередньо з Google Sheets (джерело оновлюється, карта оновлюється автоматично).

Накладення векторних карт на Google Maps

Стандартні Google Maps через iframe практично не кастомізуються. MapSVG розв’язує цю проблему радикально: ви накладаєте власний інтерактивний SVG-шар поверх карт Google будь-якого типу, супутник, рельєф, схема, гібрид. Потрібен лише Google Maps API-ключ.

Векторний шар повністю клікабельний: зони, маркери, тултипи працюють як на звичайній SVG-карті. Підсумок, карта, яка виглядає як Google Maps, але поводиться як повністю кастомний вебзастосунок. Підсвічування орієнтирів, інтерактивні маршрути та регіони, усе налаштовується.

Вбудовані редактори CSS, JavaScript і Handlebars-шаблонів

Для тих, хто працює з кодом, MapSVG пропонує три вбудовані редактори. CSS-редактор: змінюєте стилі підказок, спливних вікон, маркерів і бачите результат у реальному часі. JavaScript-редактор: підключаєтеся до подій карти (клік по регіону, наведення), пишете middleware-логіку. Редактор Handlebars-шаблонів: повністю контролюєте HTML-структуру підказок, popover-вікон і детального подання.

На практиці це означає: шаблон підказки з фотографією, ціною та кнопкою «Детальніше» робиться за п’ять хвилин. А через JavaScript можна, наприклад, при кліку на регіон надсилати AJAX-запит і динамічно підвантажувати дані.

Панель керування з попереднім переглядом у реальному часі

Інтерфейс MapSVG — це власна панель всередині адмінки WordPress. Створення карти, покроковий процес: вибір джерела, налаштування регіонів, кольори, підказки, публікація. Усі зміни відображаються у вікні попереднього перегляду миттєво, не потрібно зберігатися й оновлювати сторінку, щоб побачити результат.

Навігація, через випадне меню за розділами (Regions, Colors, Templates, Settings). Для новачка інтерфейс може здатися перевантаженим, багато опцій, але після першої години роботи логіка стає зрозумілою.

Карти з растрових зображень

MapSVG вміє працювати не лише з векторними SVG, а й зі звичайними PNG і JPEG. Вбудовані інструменти малювання дозволяють обвести області поверх растрового зображення, і вони стають клікабельними зонами. Це відкриває сценарії, які векторною картою не закриєш: інтерактивні плани поверхів, схеми розсадки, креслення, маршрути та плани міст.

Технічно ви берете фотографію плану будівлі, обводите кімнати інструментом «Draw Region», додаєте підписи й отримуєте інтерактивний план, де при кліку на приміщення показується інформація про нього. Замовники з event-індустрії та нерухомості оцінять.

Практичний посібник: встановлення та створення першої карти

Встановлення MapSVG нічим не відрізняється від будь-якого іншого плагіна WordPress. Різниця в процесі створення карти: тут потрібен щонайменше один прохід меню, щоб зрозуміти логіку інтерфейсу. Далі все піде як по маслу.

Крок 1. Встановлення плагіна

Завантажте MapSVG з WordPress.org (безкоштовна Lite-версія) або придбайте преміум на mapsvg.com. Потім в адмінці WordPress: Плагіни → Додати новий → Завантажити плагін.

Натисніть Завантажити (1), виберіть ZIP-файл плагіна (2) та Встановити зараз (3):

Дочекайтеся завершення встановлення та активуйте:

Готово. У бічному меню адмінки з’явиться пункт MapSVG, перейдіть до нього.

Крок 2. Створення карти з готового шаблону

На стартовому екрані панелі MapSVG доступні варіанти: вибрати готову карту, створити карту Google (після вставки API-ключа), побудувати карту-зображення, завантажити свій SVG або завантажити SVG-файл поверх Google Maps. Посилання Tutorials та Support у верхній частині панелі ведуть на документацію та сапорт.

Виберіть варіант New SVG Map і знайдіть потрібну карту у випадному списку. Для прикладу візьмемо карту Китаю, вона розбита на провінції та повністю готова до роботи.

На наступному екрані заповніть заголовок карти. Тут же налаштовуються розмір, адаптивність (увімкнена за замовчуванням), спливні підказки та вікна. Регіони вже клікабельні, карта готова до кастомізації.

Крок 3. Налаштування кольорів

Перейдіть до Menu → Colors. Палітра кольорів дає змогу задати кольори регіонів, фону, обведення та станів (hover, active). Обмежень немає, вибирайте будь-які відтінки.

Виставили кольори, натисніть Зберегти Ctrl + S:

Карта одразу перефарбувалася у вікні попереднього перегляду. Кілька кліків, і колірна схема готова.

Крок 4. Додавання спливних підказок

Створіть шаблон тултипу. Перейдіть до Menu → Templates → Region Tooltip. У редакторі Handlebars-шаблонів доступний тег {{title}}, він виводить назву регіону. Базовий шаблон:

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

Натисніть Зберегти Ctrl + S. Потім увімкніть підказки: Menu → Settings → Tooltips.

Тепер, коли наводите курсор на регіон, з’являється підказка з його назвою. Це базовий сценарій. Щоб додати в підказку фотографії, ціни та інші дані, знадобляться настроювані поля.

Крок 5. Настроювані поля через об’єкти бази даних

MapSVG дає змогу додавати довільні поля до регіонів. Типи полів: текст, textarea, чекбокс, зображення та інші. Створимо поле для зображень.

Перейдіть у Menu → Regions і натисніть Edit fields:

Натисніть кнопку Image, щоб додати поле типу «зображення», потім Зберегти поля:

Не забудьте натиснути Зберегти Ctrl + S. Потім перемкніться на вкладку Список:

Увімкніть режим Edit Regions і клікніть по потрібному регіону (наприклад, Nei Mongol). Праворуч з’явиться нове поле Images. Натисніть Browse:

Додайте зображення через медіабібліотеку WordPress і натисніть Вибрати зображення:

Система поверне вас на екран редагування регіону. Натисніть ОК (1), потім Зберегти Ctrl + S (2) і перемкніться назад у режим Preview (3):

Зображення додано, але в підказці вони поки що не з’являться, потрібно оновити шаблон. Перейдіть у Menu → Templates → Region Tooltip і замініть код:

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}}

Збережіть шаблон. Тепер при наведенні на Nei Mongol спливна підказка показує завантажені зображення:

Крок 6. Публікація карти на сайті

Збережіть усі зміни. Перейдіть у Сторінки → Додати нову, натисніть кнопку MapSVG над редактором:

Виберіть створену карту зі списку, плагін вставить шорткод [mapsvg id="17" title="China"]. Опублікуйте сторінку та перегляньте результат на фронтенді:

Карта повністю адаптивна, на мобільних пристроях регіони та підказки працюють без втрати функціональності. Шорткод можна вставити в будь-який пост, сторінку або віджет, карта підтягнеться коректно.

⁉️🤔 Часті запитання

Чи потрібен ключ Google Maps API для роботи MapSVG?

Тільки якщо плануєте використовувати шар Google Maps. Для роботи з готовими SVG-картами з бібліотеки та власними SVG-файлами ключ не потрібен. Якщо ж потрібні Google Maps, отримайте API-ключ у Google Cloud Console та вставте в налаштуваннях плагіна, процес займає пару хвилин.

Чи можна завантажити власний SVG-файл?

Так. Малюєте карту в Inkscape або Adobe Illustrator, зберігаєте як SVG, завантажуєте в MapSVG. Плагін сам перетворить векторні форми на клікабельні регіони. Якщо карта не геокалібрована, маркери за адресою працювати не будуть, лише ручне розставляння.

Чим платна версія відрізняється від безплатної?

Безплатна Lite-версія дає необмежену кількість карт, маркерів, спливні підказки, popover-вікна та кастомні поля. Платні тарифи відрізняються за наростанням: Starter ($49/рік) додає каталог із фільтрацією та кастомні шаблони; Plus ($99/рік), інтеграцію з Google Sheets, ACF і Metabox; Pro ($199/рік), кластеризацію маркерів і front-end редагування; Elite ($299/рік), REST API та MySQL-джерела даних. Є й довічні ліцензії: від $99 до $599.

Чи підійде плагін для користувача, який не пише код?

Базову карту з регіонами та підказками реально зробити без коду, інтерфейс візуальний. Але щойно потрібні кастомні шаблони підказок (Handlebars) або стилізація (CSS), мінімальне розуміння HTML стане в пригоді. Документація на mapsvg.com/docs написана з прикладами, і підтримка відповідає швидко.

Чи гальмують карти сайт?

Ні. SVG-карта — це вектор, який важить кілобайти, а не мегабайти. Рендеринг іде через JavaScript на стороні клієнта. При великій кількості маркерів (сотні й тисячі) рекомендуємо ввімкнути кластеризацію, вона доступна з тарифу Pro.

Що з підтримкою та оновленнями?

Плагін оновлюється кілька разів на місяць, по changelog на WordPress.org видно, що розробник активно виправляє баги та додає фічі. Підтримка, через вбудований чат прямо з адмінки (після активації). Користувачі у відгуках зазначають, що відповідають швидко, але через різницю часових поясів відповідь може надійти через кілька годин.

Чи варто купувати MapSVG: підсумковий вердикт

MapSVG — це вузькоспеціалізований інструмент, який на голову вищий за стандартні плагіни Google Maps, коли потрібна справжня інтерактивність: клікабельні регіони, фільтровані каталоги та кастомні підказки. Якщо завдання, «вставити карту проїзду», плагін надлишковий. Якщо завдання, карта нерухомості, store locator, інтерактивна статистика за регіонами або схема розсадки, MapSVG, один із найкращих варіантів на ринку WordPress.

Безплатна Lite-версія закриває сценарії, за які інші плагіни вже просять гроші: необмежена кількість карт і маркерів, кастомні поля, підказки та popover-вікна. Це рідкісна щедрість для freemium-моделі, можна запустити проєкт без бюджету й докупити тариф, коли знадобляться фільтри, каталог або інтеграція з Google Sheets.

Наш досвід: після одного вечора з документацією карта Китаю з підказками та зображеннями готова. Так, інтерфейс не інтуїтивний із першої хвилини, багато опцій і меню, але крива навчання коротка. Вбудовані редактори CSS/JS/Handlebars, знахідка для розробника: не потрібно лізти у файли теми.

Якщо ви шукаєте плагін карт для WordPress і не хочете через місяць упертися в обмеження безплатної версії, почніть із MapSVG Lite на WordPress.org. А якщо потрібна альтернатива, подивіться нашу добірку плагінів карт для WordPress, там порівняли десяток варіантів під різні завдання.