Uso del campo Mapa

¿Le gustaría mostrar un mapa en sus formularios para indicar ubicaciones específicas o ayudar a los usuarios a seleccionar una ubicación? El campo Mapa de WPForms le permite integrar mapas interactivos directamente en sus formularios, lo que mejora la experiencia del usuario y proporciona datos de ubicación precisos.

En este tutorial, te guiaremos a través de los pasos para utilizar el campo Mapa en WPForms.

---

Antes de empezar, asegúrate de instalar y activar el plugin WPForms en tu sitio web y verifica tu licencia. A continuación, crea un nuevo formulario o abre uno ya existente para editarlo.

Configuración del complemento de geolocalización

Antes de poder utilizar el campo Mapa, instale y configure el complemento Geolocalización. El campo Mapa forma parte del complemento Geolocalización y requiere la misma configuración que otras funciones de geolocalización.

Una vez que hayas completado estos pasos, podrás empezar a utilizar el campo Mapa en tus formularios.

1. Añadir un campo de mapa a tu formulario

Comience por localizar el campo Mapa en la sección Campos personalizados del generador de formularios. Haga clic en el campo Mapa o arrástrelo y suéltelo en el área de vista previa del formulario para añadirlo a su formulario.

2. Configuración de ubicaciones en el mapa

Después de añadir el campo Mapa, haz clic en él en el generador de formularios para abrir el panel Opciones de campo. A continuación, configura las ubicaciones que aparecerán en tu mapa desde la sección Ubicaciones.

Añadir direcciones

Comience escribiendo una dirección en el campo Dirección.

A medida que escribas, aparecerán sugerencias de autocompletado basadas en los datos de Google Places. A continuación, selecciona la ubicación deseada de la lista de sugerencias.

Después de seleccionar una dirección, puedes añadir:

• Nombre: una etiqueta personalizada para la ubicación, como «Oficina principal» o «Tienda del centro».
• Descripción: Información adicional sobre la ubicación.

Buscar ubicaciones cercanas:

Habilita la opción Buscar ubicaciones cercanas para filtrar las sugerencias de autocompletado de direcciones según tu ubicación geográfica actual.

Cuando se active, tu navegador solicitará permiso para acceder a tu ubicación. Una vez concedido el permiso, las sugerencias darán prioridad a las ubicaciones cercanas, lo que facilitará la búsqueda y selección de direcciones en tu zona.

Mostrar información sobre la ubicación:

Habilite la opción Mostrar lista de ubicaciones para mostrar la información completa de la dirección debajo del mapa en la interfaz. Esto permite a los usuarios ver una lista con el nombre y la dirección de cada ubicación que haya configurado.

3. Personalización de los marcadores del mapa

Cada ubicación puede tener un icono o imagen personalizados como marcador. En la sección Ubicaciones, busca el menú desplegable Icono de la ubicación que deseas personalizar.

Selecciona Icono para elegir entre más de 2000 iconos de Font Awesome, o selecciona Imagen para cargar una imagen personalizada.

Si utiliza iconos, haga clic en el campo del icono para abrir el selector de iconos. Busque el icono que desee y selecciónelo.

Si utiliza imágenes, haga clic en «Subir imagen » para abrir la biblioteca multimedia. Suba un nuevo archivo o seleccione una imagen existente de su biblioteca multimedia.

Personalización de la apariencia de los marcadores

Para cambiar el color del marcador, haz clic en el selector de color situado junto al campo del icono. Puedes seleccionar uno de los colores preestablecidos, arrastrar el selector de color para elegir cualquier color o pegar directamente un valor hexadecimal de color.

Para que los marcadores sean más visibles, usa el menú desplegable de tamaño que está al lado del campo del ícono. Las opciones disponibles son: Pequeño, Mediano o Grande. Los marcadores más grandes ayudan a que tus ubicaciones personalizadas se destaquen de otras ubicaciones en el mapa.

Configuración del nivel de zoom

Ajuste el campo Nivel de zoom para controlar la proximidad con la que se muestra el mapa cuando se carga por primera vez. El valor predeterminado es 15, que es el nivel de zoom estándar para los mapas incrustados.

Cuando se configuran varias ubicaciones, el nivel de zoom se ajusta automáticamente para mostrar todas las ubicaciones, y esta configuración se desactiva.

4. Configuración de los ajustes avanzados del mapa

Para personalizar aún más, haz clic en la pestaña Avanzado del panel Opciones de campo. Aquí puedes controlar la apariencia del mapa, las interacciones del usuario y cómo se muestra en las entradas del formulario.

Configuración de la presentación

Decida qué elementos de la interfaz de usuario de Google Maps serán visibles en su mapa:

• Ocultar pantalla completa: Oculta el botón de pantalla completa que permite a los usuarios ver el mapa en modo de pantalla completa.
• Ocultar tipo de mapa: Oculta el selector de tipo de mapa (satélite, terreno, etc.).
• Ocultar información de ubicación: Oculta las tarjetas de información de ubicación que aparecen al hacer clic en los marcadores.
• Ocultar Street View: Oculta el control de Street View.

La mayoría de estas opciones están ocultas de forma predeterminada para proporcionar una apariencia más limpia del mapa.

Configuración interactiva

Controla cómo interactúan los usuarios con el mapa:

• Ocultar control de la cámara: Oculta los botones de control de la cámara.
• Ocultar zoom: Oculta los botones para acercar y alejar la imagen.
• Desactivar arrastre: impide que los usuarios arrastren el mapa para desplazarse por él.
• Desactivar el zoom del ratón: impide el zoom con la rueda del ratón.

Otros ajustes

Opciones adicionales sobre el comportamiento del campo mapa:

• Mostrar en entrada: muestra los datos del mapa en las entradas del formulario.
• Mostrar miniatura en la entrada: muestra una miniatura del mapa en las entradas del formulario.
• Ocultar etiqueta: Oculta la etiqueta del campo en la interfaz.

5. Gestión de múltiples ubicaciones

Utilice varias ubicaciones cuando necesite mostrar varios puntos en un solo mapa, como varias tiendas, puntos de recogida o sucursales. Esta función permite a los usuarios ver todas las ubicaciones a la vez y, opcionalmente, seleccionar su ubicación preferida.

Para añadir varias ubicaciones al mapa, haz clic en el icono más (+) en la sección Ubicaciones del panel Opciones de campo. Cada ubicación puede tener su propio icono, color, nombre y descripción.

Habilitar la selección de ubicación

Cuando tenga configuradas dos o más ubicaciones, active la opción Permitir selección de ubicación. Esta función requiere:

• Se han añadido al menos dos ubicaciones al mapa.
• La opción Mostrar lista de ubicaciones debe estar habilitada.

Con esta opción, aparecen botones de radio debajo del mapa, lo que permite a los usuarios seleccionar su ubicación preferida.

Preguntas frecuentes

Estas son las respuestas a algunas de las preguntas más comunes que recibimos sobre el uso del campo Mapa en WPForms.

¿Puedo ocultar otros negocios y puntos de interés en mi mapa?

Sí. Para ocultar puntos de interés (PDI) como restaurantes y tiendas, de modo que solo sean visibles tus marcadores personalizados, tendrás que crear un estilo de mapa personalizado en Google Cloud Console y, a continuación, aplicarlo a tu campo de mapa mediante un fragmento de código. Dado que el estilo del mapa se gestiona a través de la función de estilo basada en la nube de Google, esta configuración se realiza en el panel de control de Google Cloud Console.

Consulte nuestra documentación para desarrolladores sobre cómo aplicar estilos de mapa personalizados al campo Mapa para obtener instrucciones paso a paso.

¡Eso es todo! Ahora ya sabes cómo utilizar el campo Mapas en WPForms para mejorar tus formularios con mapas interactivos y datos de ubicación precisos.

A continuación, ¿te gustaría mejorar fácilmente el diseño de tus formularios con temas ya preparados? No te pierdas nuestra guía sobreel uso de temas para formularios, donde encontrarás todos los detalles sobre cómo aplicar estos temas a tus formularios.