CMS: mostrar las direcciones de los ítems de tu colección en Google Maps

15 min de lectura
Muestra las ubicaciones de los ítems de la colección del CMS (Sistema de gestión de contenido) en un elemento interactivo de Google Maps en tu sitio. Agrega las ubicaciones de tus ítems en un campo de dirección en tu colección. Luego, conecta un mapa de tu sitio a un conjunto de datos que se vincule a tu colección. 

Agregar un campo de dirección a la colección del CMS

Asegúrate de que los ítems de la colección que deseas mostrar en el mapa tengan una ubicación ingresada en un campo de dirección. Una vez conectadas a tu mapa, estas ubicaciones se muestran como pines. También puedes conectar los títulos, las descripciones, los enlaces, el texto del enlace y las URL de los pines a los campos de la colección. 

Para agregar un campo de dirección a la colección:

  1. Ve a CMS en el panel de control de tu sitio. Como alternativa, puedes hacer clic en CMS desde el Editor y luego en Tus colecciones.
  2. Haz clic en la colección correspondiente.
  3. Haz clic en Administrar campos
  4. Haz clic en + Agregar campo
  5. Selecciona Dirección y haz clic en Elige el tipo de campo
  6. Ingresa un nombre en el campo Nombre de campo
  7. (Opcional solo para Velo) Actualiza el Id. de campo, que se utiliza en el código del sitio. No es posible actualizar este campo más tarde. 
  8. (Opcional) Ingresa un texto de ayuda si deseas que aparezca una descripción emergente en tu colección junto al título del campo.
  9. (Opcional) Habilita la palanca Encriptar contenido del campo como Información de identificación personal para encriptar los datos de ubicación que podrían considerarse información de identificación personal.
  10. Haz clic en Guardar.
  11. Ingresa una ubicación para cada ítem en su campo de dirección. Asegúrate de seleccionar manualmente la dirección correcta de la lista que aparece a medida que escribes. Si no seleccionas una dirección de la lista, Google Maps puede tener problemas para leer y mostrar correctamente todas tus direcciones.

Conectar los campos de la colección al mapa

Conecta tu elemento de Google Maps a un conjunto de datos que se vincule a tu colección. Luego, conecta el campo de dirección a la ubicación en el mapa y elige qué campos usar con el resto de las conexiones. Una vez conectado, puedes asegurarte de que todas las ubicaciones estén a la vista ajustando la configuración del zoom. Puedes elegir entre varios diseños de mapas estilizados y ajustar el tamaño del mapa en tu página.  
Editor de Wix
Editor X
Editor de Wix Studio
  1. Ve al Editor.
  2. Ve a la página o a la sección en la que deseas agregar un mapa.
  3. Haz clic en Agregar elementos  a la izquierda del Editor.
  4. Haz clic en Formularios y selecciona Mapas
  5. Haz clic en el elemento de Google Maps correspondiente y arrástralo a tu página. 
  6. Haz clic en el icono Conectar a CMS .
  7. Haz clic en el menú desplegable Elige un conjunto de datos y selecciona un conjunto de datos existente para conectarlo a tu colección. Como alternativa, haz clic en Crear un conjunto de datos, luego elige la colección que deseas conectar, dale un nombre al conjunto de datos y haz clic en Crear.
  8. En Opciones de conexión, usa los menús desplegables para conectar cada parte del mapa:
    Consejo: Haz clic en el menú desplegable correspondiente y selecciona Agregar nuevo campo si necesitas crear y conectar un nuevo campo de colección.
    • La ubicación se conecta a: selecciona el campo de dirección que deseas usar para tus ítems. 
    • El título se conecta a: selecciona el campo que deseas usar como título, que se muestra en negrita en el mapa.
    • La descripción se conecta a: selecciona el campo que deseas usar como descripción, que se muestra debajo del título. 
    • El enlace conecta a: selecciona un campo de URL si deseas agregar un enlace debajo del título y de la descripción. Asegúrate de conectar el menú desplegable El texto se conecta a, que determina el texto que se enlazará, o el enlace no se mostrará.
    • El texto se conecta a: selecciona un campo para usar como texto que tendrá un hipervínculo al menú desplegable El enlace se conecta a. Asegúrate de seleccionar en ambos menús desplegables para que se muestre el enlace.
    • El pin se conecta a: si deseas usar tu propio icono en lugar del marcador de pin predeterminado del mapa , selecciona un campo de URL que incluya la URL de tu icono. Recomendamos usar imágenes que tengan menos de 30 píxeles de ancho y alto. 
  1. Cambia el tamaño del mapa haciendo clic en los bordes y arrastrándolos. También puedes hacer clic en el icono Estirar  para expandirlo al ancho total de tu sitio.
  2. Haz clic en el icono Ajustes  en el elemento de Google Maps y elige entre las siguientes opciones: 
    • Zoom: arrastra el control deslizante para cambiar la posición predeterminada del zoom del mapa.
    • Mostrar mapa y vista satelital: permite que los visitantes alternen entre el mapa y las vistas satelitales. 
    • Control de zoom: permite que los visitantes puedan acercar y alejar el mapa. 
    • Street View: permite que los visitantes seleccionen Google Street View para ver la ubicación desde el nivel del suelo. 
    • Mostrar enlace con indicaciones: permite que los visitantes hagan clic en un enlace para ver indicaciones en Google Maps.
    • Permitir arrastre: permite que los visitantes hagan clic y arrastren para moverse en el mapa. 
  1. Haz clic en el icono Diseño  para elegir otro diseño de mapa preestablecido.
    Nota: La pestaña Diseño del pin no afecta al pin del mapa una vez que conectas el mapa a un conjunto de datos. Usa el menú desplegable El pin se conecta a en el paso 8 si deseas usar un pin personalizado en el mapa.
Importante:
Si tienes ítems en tu colección que no tienen ubicaciones en el campo de dirección que conectaste, el mapa no mostrará ningún ítem de la colección. Puedes resolver este problema agregando un filtro al conjunto de datos. Establece el filtro en el campo de dirección y la condición en No está vacío. Como resultado, el conjunto de datos solo lee los ítems que tienen una ubicación y los muestra en el mapa. 

Preguntas frecuentes

Haz clic a continuación para obtener respuestas a las preguntas más frecuentes sobre la conexión de Google Maps al CMS. 

¿Te ha sido útil?

|