Нужна интерактивная карта на сайте 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, там сравнили десяток вариантов под разные задачи.