Cada vez más empresas necesitan mostrar de forma clara y visual dónde pueden encontrarse sus productos o servicios. En este proyecto desarrollamos un mapa interactivo de puntos de venta totalmente personalizado para una web WordPress creada con Elementor, priorizando el rendimiento, la flexibilidad y la facilidad de gestión.
El objetivo era crear una solución moderna, escalable y fácil de mantener, evitando depender de sistemas pesados o limitaciones habituales de algunos plugins comerciales.
El objetivo del proyecto
El cliente necesitaba una página de “Dónde comprar” donde los usuarios pudieran:
- Visualizar todas las tiendas en un mapa interactivo.
- Filtrar los puntos de venta por provincia o tipo de establecimiento.
- Navegar cómodamente desde móvil y escritorio.
- Gestionar las tiendas desde WordPress de forma sencilla.
- Mantener un diseño totalmente integrado con la identidad visual de la web.
Además, se buscaba evitar costes innecesarios derivados de APIs externas y tener control completo sobre la solución.
Por qué no utilizamos un plugin tradicional
Inicialmente valoramos distintas opciones basadas en plugins de localización para WordPress. Aunque existen soluciones funcionales, muchas dependen de Google Maps y requieren addons externos para disponer de filtros avanzados o personalizaciones reales.
En este caso decidimos optar por una solución a medida porque ofrecía varias ventajas importantes:
- Mayor velocidad de carga.
- Diseño completamente personalizado.
- Sin limitaciones visuales.
- Sin depender de servicios de pago.
- Mejor integración con Elementor.
- Sistema más limpio y escalable a largo plazo.
La solución: Leaflet + OpenStreetMap
Para el desarrollo utilizamos:
- WordPress como CMS.
- Elementor para la maquetación visual.
- Leaflet.js como librería de mapas.
- OpenStreetMap como proveedor cartográfico.
- Campos personalizados para gestionar las tiendas desde el panel de administración.
Leaflet es una librería JavaScript muy ligera y potente para crear mapas interactivos. Combinada con OpenStreetMap, permite crear sistemas de geolocalización profesionales sin necesidad de utilizar Google Maps.
Desarrollo del sistema de tiendas
Creamos un sistema personalizado dentro de WordPress para que el cliente pudiera añadir y editar tiendas fácilmente desde el panel de administración.
Cada tienda incluye:
- Nombre del establecimiento.
- Dirección.
- Coordenadas geográficas.
- Provincia.
- Tipo de tienda.
- Información adicional.
- Enlace o datos de contacto.
Toda esta información se sincroniza automáticamente con el mapa.
Filtros dinámicos y experiencia de usuario
Uno de los puntos clave del proyecto fue la creación de filtros dinámicos para facilitar la búsqueda de puntos de venta.
El sistema permite filtrar las tiendas por:
- Provincia.
- Tipo de establecimiento.
- Ubicación concreta.
Además, el mapa actualiza los marcadores en tiempo real sin necesidad de recargar la página, ofreciendo una experiencia mucho más fluida y moderna.
Integración completa con Elementor
Toda la solución se integró directamente dentro de Elementor mediante shortcodes personalizados.
Esto permitió:
- Mantener el diseño visual de la web.
- Adaptar el mapa a cualquier dispositivo.
- Insertar el sistema en cualquier página fácilmente.
- Personalizar estilos desde el propio constructor visual.
El resultado final es un mapa totalmente responsive y perfectamente integrado en el diseño general del sitio web.
Ventajas de usar OpenStreetMap en proyectos WordPress
Utilizar OpenStreetMap aporta varias ventajas importantes:
Sin costes de licencias
No depende de APIs de pago ni límites de uso elevados.
Mayor control técnico
La solución puede personalizarse completamente según las necesidades del proyecto.
Mejor rendimiento
La carga es más ligera que muchas integraciones tradicionales.
Escalabilidad
El sistema puede ampliarse fácilmente con nuevas funcionalidades, filtros o integraciones futuras.
Resultado final
El resultado fue un sistema de localización de tiendas moderno, rápido y totalmente personalizado, adaptado tanto a las necesidades del cliente como a la experiencia del usuario final.
Gracias a esta solución, el cliente puede gestionar todos sus puntos de venta desde WordPress de forma sencilla, mientras los usuarios encuentran rápidamente el establecimiento más adecuado desde cualquier dispositivo.
¿Necesitas un mapa personalizado para tu web?
En Premiero desarrollamos soluciones WordPress a medida adaptadas a cada proyecto: mapas interactivos, sistemas de localización, integraciones personalizadas y desarrollos avanzados con Elementor.
Si necesitas una solución similar para tu negocio, podemos ayudarte a crearla.