Uso del campo de 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 en WPForms le permite integrar mapas interactivos directamente en sus formularios, mejorando la experiencia del usuario y proporcionando datos precisos de ubicación.

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

---

Antes de empezar, asegúrese de instalar y activar el plugin WPForms en su sitio y verificar su licencia. Luego, cree un nuevo formulario o abra uno existente para editarlo.

Configuración del complemento de geolocalización

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

Una vez que haya completado estos pasos, puede empezar a usar el campo Mapa en sus formularios.

1. Añadir un campo Mapa a su formulario

Comience localizando el campo Mapa en la sección Campos de fantasía del constructor 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. Configurar ubicaciones del mapa

Después de añadir el campo Mapa, haga clic en él en el constructor de formularios para abrir el panel Opciones del campo. Luego, configure las ubicaciones que aparecerán en su mapa desde la sección Ubicaciones.

Añadir direcciones

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

Mientras escribe, aparecerán sugerencias de autocompletado basadas en datos de Google Places. Luego, seleccione la ubicación deseada de la lista de sugerencias.

Después de seleccionar una dirección, puede 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.

Encontrar ubicaciones cercanas:

Active la opción Encontrar ubicaciones cercanas para filtrar las sugerencias de autocompletado de direcciones según su ubicación geográfica actual.

Cuando se activa, su navegador solicitará permiso para acceder a su ubicación. Una vez concedido el permiso, las sugerencias priorizarán las ubicaciones cercanas, lo que facilitará la búsqueda y selección de direcciones en su vecindario.

Mostrar información de la ubicación:

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

3. Personalizar marcadores del mapa

Cada ubicación puede tener un icono o imagen personalizada como marcador. En la sección Ubicaciones, busque el menú desplegable Icono para la ubicación que desea personalizar.

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

Si usas iconos, haz clic en el campo del icono para abrir el selector de iconos. Busca el icono que quieras y selecciónalo.

Si usas imágenes, haz clic en Subir imagen para abrir la biblioteca de medios. Sube un archivo nuevo o selecciona una imagen existente de tu biblioteca de medios.

Personalizar la apariencia del marcador

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

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

Establecer el nivel de zoom

Ajusta el campo Nivel de zoom para controlar la cercanía con la que aparece el mapa cuando se carga por primera vez. El valor predeterminado es 15, que es el nivel de zoom estándar para 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 deshabilita.

4. Configurar ajustes avanzados del mapa

Para una personalización adicional, haz clic en la pestaña Avanzado en el 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.

Ajustes de presentación

Decide qué elementos de la interfaz de Google Maps son visibles en tu 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 por defecto para proporcionar una apariencia de mapa más limpia.

Ajustes interactivos

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

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

Otros ajustes

Opciones adicionales sobre cómo se comporta el campo del mapa:

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

5. Gestionar múltiples ubicaciones

Utiliza varias ubicaciones cuando necesites mostrar varios puntos en un solo mapa, como varias ubicaciones de tiendas, puntos de recogida u oficinas 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 a tu mapa, haz clic en el icono de más (+) en la sección Ubicaciones del panel Opciones de campo. Cada ubicación puede tener su propio icono de marcador, color, nombre y descripción únicos.

Habilitar selección de ubicación

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

• Al menos dos ubicaciones añadidas al mapa.
• Que la opción Mostrar lista de ubicaciones esté 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 frecuentes 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 (POI) como restaurantes y tiendas, de modo que solo sean visibles sus marcadores personalizados, deberá crear un estilo de mapa personalizado en Google Cloud Console y luego aplicarlo a su campo 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 su panel 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 sabe cómo usar el campo Mapas en WPForms para mejorar sus formularios con mapas interactivos y datos de ubicación precisos.

¿A continuación, le gustaría mejorar fácilmente el diseño de sus formularios con temas predefinidos? Asegúrese de consultar nuestra guía sobre cómo usar temas de formularios para obtener todos los detalles sobre cómo aplicar estos temas a sus formularios.