¿Necesita un mapa interactivo en su sitio WordPress y el Google Maps estándar no es suficiente? Un mapa iframe convencional no ofrece regiones cliqueables, información emergente ni un directorio de objetos con filtros. Y su cliente quiere un mapa con búsqueda por dirección y regiones coloreadas para estadísticas.

MapSVG es uno de los pocos plugins de WordPress que maneja todo esto en una sola herramienta. Lo utilizan más de 16.000 sitios, y la versión gratuita en WordPress.org le permite probar casi todas las funciones básicas sin pagar. A continuación encontrará un desglose detallado de las funcionalidades, una guía práctica de configuración y un veredicto honesto sobre para quién es adecuado este plugin y quién debería buscar otra opción.

💡 Resumen rápido:

• Cargue un mapa SVG listo para usar de la biblioteca integrada o suba su propio archivo.
• Vincule objetos de base de datos con campos personalizados a las regiones.
• Configure la información emergente y las ventanas superpuestas mediante el editor de plantillas.
• Si lo necesita, superponga el mapa vectorial sobre Google Maps.
• Inserte el shortcode en una página y compruebe el resultado.

Qué puede hacer MapSVG: desglose de funciones clave

El plugin está desarrollado por Roman Stepanov (RomanCode en WordPress.org). El proyecto está activo desde 2012 y recibe actualizaciones periódicas: a junio de 2026, la versión actual es la 8.6.6, con múltiples lanzamientos al mes según el registro de cambios. Esto es importante para un plugin que funciona con la API de Google Maps, ya que sin actualizaciones regulares los mapas se rompen cada vez que cambia la clave de API.

Más de 100 mapas geocalibrados listos para usar

El plugin incluye una biblioteca de más de 100 mapas SVG geocalibrados. El mapa del mundo ya está dividido en países cliqueables. Los mapas de países con divisiones en estados, provincias y regiones están disponibles por separado. También hay varios mapas especializados.

La geocalibración significa que cada área del mapa está vinculada a coordenadas reales. Puede añadir marcadores por dirección o latitud/longitud, y estos se ubicarán con precisión en la región correcta. ¿No encuentra el mapa adecuado en la biblioteca? Dibuje un SVG en Inkscape o Adobe Illustrator, súbalo a MapSVG y el plugin convertirá su vector en un mapa interactivo con zonas cliqueables.

Objetos de base de datos con campos personalizados

Esta función diferencia a MapSVG de la mayoría de los plugins de mapas para WordPress. Usted crea entradas (objetos) en la base de datos integrada del plugin con el conjunto de campos que necesite: texto, números, imágenes, casillas de verificación, listas desplegables. Luego vincula un objeto a una región específica del mapa.

Ejemplo: una agencia inmobiliaria crea objetos para propiedades con dirección, precio, superficie y fotos. Cada objeto se vincula a una región del mapa. Un visitante hace clic en un área y ve la ficha de la propiedad en una ventana emergente atractiva, vista de detalle o información sobreimpresa. No necesita un plugin externo para el almacenamiento de datos; todo permanece dentro de MapSVG.

Directorio con filtros y búsqueda

Los objetos de la base de datos pueden mostrarse no solo en el mapa, sino también como un directorio filtrable junto a este. Cuando un usuario introduce una consulta en la barra de búsqueda o selecciona un valor de un filtro desplegable, el directorio y el mapa se actualizan de forma sincronizada. Al hacer clic en una región del mapa se filtra el directorio, y viceversa.

Las versiones premium añaden filtros por categoría, código postal y fecha. Se admite la importación CSV y, a partir del nivel Plus, los datos pueden extraerse directamente de Google Sheets (cuando la fuente se actualiza, el mapa se actualiza automáticamente).

Superposición de mapa vectorial sobre Google Maps

Los Google Maps estándar mediante iframe casi no ofrecen personalización. MapSVG resuelve este problema de forma radical: usted superpone su propia capa SVG interactiva sobre Google Maps de cualquier tipo (satélite, relieve, mapa de carreteras, híbrido). Solo necesita una clave de API de Google Maps.

La capa vectorial es completamente cliqueable: las zonas, los marcadores y la información emergente funcionan igual que en un mapa SVG normal. El resultado es un mapa que se ve como Google Maps pero se comporta como una aplicación web totalmente personalizada. El resaltado de puntos de referencia, las rutas interactivas y las regiones son todos configurables.

Editores integrados de CSS, JavaScript y plantillas Handlebars

Para quienes trabajan con código, MapSVG ofrece tres editores integrados. El editor CSS le permite modificar estilos de tooltips, ventanas emergentes y marcadores viendo los resultados en tiempo real. El editor JavaScript le permite engancharse a eventos del mapa (clic en región, hover) y escribir lógica de middleware. El editor de plantillas Handlebars le da control total sobre la estructura HTML de tooltips, ventanas popover y vistas de detalle.

En la práctica, esto significa que una plantilla de tooltip con foto, precio y botón «Más información» puede construirse en cinco minutos. Y mediante JavaScript puede, por ejemplo, enviar una petición AJAX al hacer clic en una región y cargar datos dinámicamente.

Panel de control con vista previa en tiempo real

La interfaz de MapSVG es un panel específico dentro del administrador de WordPress. La creación de mapas es un proceso paso a paso: elija la fuente, configure regiones, colores, tooltips, publique. Todos los cambios aparecen al instante en la ventana de vista previa; no necesita guardar y recargar la página para ver los resultados.

La navegación funciona mediante un menú desplegable organizado por secciones (Regiones, Colores, Plantillas, Ajustes). La interfaz puede resultar abrumadora para principiantes porque hay muchas opciones, pero tras la primera hora la lógica se vuelve clara.

Mapas a partir de imágenes rasterizadas

MapSVG funciona no solo con SVG vectoriales, sino también con archivos PNG y JPEG comunes. Las herramientas de dibujo integradas le permiten trazar áreas sobre una imagen rasterizada, y estas se convierten en zonas cliqueables. Esto abre escenarios que los mapas vectoriales no pueden cubrir: planos interactivos, mapas de asientos, planos técnicos, rutas y planos urbanos.

Técnicamente, usted toma una foto del plano de un edificio, traza las habitaciones con la herramienta «Dibujar región», añade etiquetas y obtiene un plano interactivo donde al hacer clic en una habitación se muestra información sobre ella. Los clientes de los sectores de eventos e inmobiliario apreciarán esta funcionalidad.

Guía práctica: instalación y creación de su primer mapa

Instalar MapSVG no es diferente de cualquier otro plugin de WordPress. La diferencia está en el proceso de creación del mapa: necesita al menos un recorrido por el menú para entender la lógica de la interfaz. Después de eso, todo fluye.

Paso 1. Instalar el plugin

Descargue MapSVG desde WordPress.org (versión Lite gratuita) o adquiera la versión premium en mapsvg.com. Luego, en el administrador de WordPress: Plugins → Añadir nuevo → Subir plugin.

Haga clic en Subir (1), seleccione el archivo ZIP del plugin (2) y pulse Instalar ahora (3):

Espere a que la instalación finalice y actívelo:

Listo. Aparecerá un elemento MapSVG en el menú lateral del administrador; haga clic en él.

Paso 2. Crear un mapa a partir de una plantilla lista para usar

En la pantalla de inicio del panel de MapSVG verá opciones: elegir un mapa ya preparado, crear un mapa de Google (tras insertar una clave API), construir un mapa de imagen, subir su propio SVG o subir un archivo SVG sobre Google Maps. Los enlaces Tutoriales y Soporte en la parte superior del panel conducen a la documentación y al servicio de asistencia.

Elija Nuevo mapa SVG y busque el mapa que necesita en la lista desplegable. Para este ejemplo usaremos el mapa de China, que está dividido en provincias y completamente listo para funcionar.

En la siguiente pantalla, complete el título del mapa. Aquí también puede configurar el tamaño, la adaptabilidad (activada por defecto), la información sobre herramientas y las ventanas emergentes. Las regiones ya son cliqueables y el mapa está listo para personalizar.

Paso 3. Configurar los colores

Vaya a Menú → Colores. La paleta de colores le permite establecer colores para las regiones, el fondo, el trazo y los estados (cursor encima, activo). No hay restricciones; elija cualquier tonalidad.

Una vez que haya definido los colores, haga clic en Guardar Ctrl + S:

El mapa cambia de color inmediatamente en la ventana de vista previa. Unos pocos clics y el esquema cromático está listo.

Paso 4. Añadir información sobre herramientas

Cree una plantilla de información sobre herramientas. Vaya a Menú → Plantillas → Información de región. El editor de plantillas Handlebars admite la etiqueta {{title}}, que muestra el nombre de la región. Plantilla básica:

1
Region: <strong>{{title}}</strong>

Haga clic en Guardar Ctrl + S. Luego active la información sobre herramientas: Menú → Configuración → Información sobre herramientas.

Ahora, al pasar el cursor sobre una región, aparece una información sobre herramientas con su nombre. Este es el escenario básico. Para añadir fotos, precios y otros datos a la información sobre herramientas, necesitará campos personalizados.

Paso 5. Campos personalizados mediante objetos de base de datos

MapSVG le permite añadir campos personalizados a las regiones. Los tipos de campo incluyen texto, área de texto, casilla de verificación, imágenes y otros. Vamos a crear un campo de imagen.

Vaya a Menú → Regiones y haga clic en Editar campos:

Haga clic en el botón Imagen para añadir un campo de tipo imagen y luego en Guardar campos:

No olvide hacer clic en Guardar Ctrl + S. Luego cambie a la pestaña Lista:

Active el modo Editar regiones y haga clic en la región deseada (por ejemplo, Nei Mongol). Aparecerá un nuevo campo Imágenes a la derecha. Haga clic en Examinar:

Añada imágenes a través de la biblioteca de medios de WordPress y haga clic en Seleccionar imágenes:

El sistema le devolverá a la pantalla de edición de la región. Haga clic en Aceptar (1), luego en Guardar Ctrl + S (2) y vuelva al modo Vista previa (3):

Las imágenes se han añadido, pero todavía no aparecerán en la información sobre herramientas; necesita actualizar la plantilla. Vaya a Menú → Plantillas → Información sobre herramientas de región y reemplace el código:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Guarde la plantilla. Ahora, al pasar el cursor sobre Nei Mongol, la información sobre herramientas muestra las imágenes cargadas:

Paso 6. Publicar el mapa en su sitio

Guarde todos los cambios. Vaya a Páginas → Añadir nueva, haga clic en el botón MapSVG situado encima del editor:

Seleccione el mapa creado en la lista y el plugin insertará el shortcode [mapsvg id="17" title="China"]. Publique la página y compruebe el resultado en el frontend:

El mapa es totalmente adaptable; en dispositivos móviles, las regiones y la información sobre herramientas funcionan sin perder funcionalidad. El shortcode puede insertarse en cualquier entrada, página o widget, y el mapa se cargará correctamente.

⁉️🤔 Preguntas frecuentes

¿Necesito una clave de API de Google Maps para que MapSVG funcione?

Solo si planea usar la capa de Google Maps. Para trabajar con mapas SVG prediseñados de la biblioteca y con sus propios archivos SVG, no se requiere ninguna clave. Si necesita Google Maps, obtenga una clave de API desde Google Cloud Console e introdúzcala en los ajustes del plugin; el proceso toma un par de minutos.

¿Puedo cargar mi propio archivo SVG?

Sí. Dibuje un mapa en Inkscape o Adobe Illustrator, guárdelo como SVG y súbalo a MapSVG. El plugin convertirá automáticamente las formas vectoriales en regiones cliqueables. Si el mapa no está calibrado geográficamente, los marcadores por dirección no funcionarán; deberá colocarlos manualmente.

¿Cuál es la diferencia entre la versión de pago y la gratuita?

La versión Lite gratuita le ofrece mapas y marcadores ilimitados, información sobre herramientas, ventanas emergentes y campos personalizados. Los planes de pago añaden funciones progresivamente: Starter ($49/año) añade un directorio filtrable y plantillas personalizadas; Plus ($99/año) añade integración con Google Sheets, ACF y Metabox; Pro ($199/año) añade agrupación de marcadores y edición en el frontend; Elite ($299/año) añade API REST y fuentes de datos MySQL. También hay licencias vitalicias disponibles, que van de $99 a $599.

¿Es el plugin adecuado para personas sin conocimientos de código?

Un mapa básico con regiones e información sobre herramientas puede hacerse sin código sin duda; la interfaz es visual. Pero cuando necesite plantillas de información sobre herramientas personalizadas (Handlebars) o estilos (CSS), será útil tener conocimientos mínimos de HTML. La documentación en mapsvg.com/docs está escrita con ejemplos y el soporte responde con rapidez.

¿Los mapas ralentizan el sitio?

No. Un mapa SVG es un gráfico vectorial que pesa kilobytes, no megabytes. El renderizado se realiza mediante JavaScript en el lado del cliente. Con un gran número de marcadores (cientos o miles) recomendamos activar la agrupación, disponible a partir del plan Pro.

¿Qué hay del soporte y las actualizaciones?

El plugin se actualiza varias veces al mes; el registro de cambios en WordPress.org muestra que el desarrollador corrige errores y añade funciones activamente. El soporte está disponible a través de un chat integrado directamente desde el panel de administración (tras la activación). Los usuarios señalan en las reseñas que las respuestas son rápidas, pero debido a las diferencias horarias, una respuesta puede tardar varias horas.

¿Vale la pena comprar MapSVG?: veredicto final

MapSVG es una herramienta especializada que destaca muy por encima de los plugins estándar de Google Maps cuando necesita interactividad real: regiones cliqueables, directorios filtrables e información sobre herramientas personalizada. Si su tarea es «insertar un mapa de indicaciones», el plugin es excesivo. Si su tarea es un mapa inmobiliario, un localizador de tiendas, estadísticas regionales interactivas o un plano de asientos, MapSVG es una de las mejores opciones del mercado de WordPress.

La versión Lite gratuita cubre escenarios por los que otros plugins ya cobran: mapas y marcadores ilimitados, campos personalizados, información sobre herramientas y ventanas emergentes. Esta es una generosidad poco común para un modelo freemium; usted puede lanzar un proyecto sin presupuesto y adquirir un plan cuando necesite filtros, un directorio o integración con Google Sheets.

Nuestra experiencia: tras una tarde con la documentación, un mapa de China con información sobre herramientas e imágenes estuvo listo. Sí, la interfaz no es intuitiva a primera vista (muchas opciones y menús), pero la curva de aprendizaje es corta. Los editores integrados de CSS/JS/Handlebars son una bendición para los desarrolladores: no hace falta escarbar en los archivos del tema.

Si busca un plugin de mapas para WordPress y no quiere toparse con las limitaciones de la versión gratuita en un mes, empiece con MapSVG Lite en WordPress.org. Y si necesita una alternativa, consulte nuestro resumen de plugins de mapas para WordPress, donde comparamos una docena de opciones para diferentes casos de uso.