Cómo integrar un mapa de propiedad en 3D de Georivo en Webflow
Añada un iframe de Georivo con el elemento Code Embed de Webflow, conserve la relación de aspecto, publique el dominio autorizado y verifique el widget activo.
Para integrar una historia de ubicación de Georivo en Webflow, primero publique el widget y autorice el dominio exacto del sitio web público en Georivo. Copie el iframe HTTPS generado, añádalo a través del elemento de código o HTML compatible de la plataforma, conserve su relación de aspecto y publique la página. Verifique la URL pública activa en ordenadores y dispositivos móviles, incluyendo el acceso al dominio, la carga, la atribución, el comportamiento de consentimiento y la gestión de alternativas de respaldo.
Requisitos previos para la integración con Webflow
La integración de una historia de ubicación en 3D interactiva en un sitio web de Webflow requiere una preparación minuciosa en ambas plataformas. Antes de intentar integrar cualquier código, debe asegurarse de cumplir con todos los requisitos previos técnicos y administrativos. En primer lugar, debe contar con un widget de Georivo completamente configurado y publicado. Este widget representa la presentación de su propiedad, la historia del vecindario o la guía de llegada, con movimientos de cámara programados y ubicaciones marcadas. Los borradores sin guardar o las configuraciones no publicadas no se mostrarán correctamente en entornos de producción.
En segundo lugar, debe tener acceso de editor al proyecto de Webflow de destino. La integración depende de las capacidades de código personalizado de Webflow, las cuales están restringidas según la estructura de su cuenta. Específicamente, debe contar con un plan de Webflow que permita la inserción de iframes o código HTML personalizado. Si su sitio se encuentra en un plan básico gratuito sin un plan de sitio activo o una mejora de espacio de trabajo, el elemento no estará disponible. Por último, debe identificar el nombre de dominio público exacto donde se alojará su sitio. Georivo utiliza integraciones vinculadas a dominios como una función de seguridad fundamental para proteger las imágenes geoespaciales con licencia frente al uso no autorizado o enlaces directos en sitios externos.
Copiar el código de inserción de Georivo
Una vez que la historia de ubicación en 3D esté finalizada y publicada en el panel de control de Georivo, podrá obtener el código de inserción seguro. Diríjase a la configuración de uso compartido o distribución de su widget específico. Aquí encontrará la configuración de autorización de dominios. Debe introducir el dominio público exacto de su sitio de Webflow, incluyendo cualquier subdominio de prueba que planee utilizar para realizar pruebas antes del lanzamiento público definitivo. Este paso de autorización es un requisito estricto; el sistema de seguridad del widget bloqueará la visualización en cualquier dominio que no esté explícitamente registrado.
Tras guardar sus dominios autorizados, copie el fragmento de código iframe HTTPS generado. De acuerdo con el contrato estricto de inserción, debe utilizar únicamente el código iframe exacto copiado desde el panel de su widget de Georivo publicado. Nunca intente exponer, modificar o crear manualmente la URL protegida ni los tokens de seguridad únicos incluidos en la cadena de origen. Alterar estos parámetros invalidará la verificación de seguridad, lo que provocará un error de carga o de permisos cuando el iframe intente conectarse a los servidores de renderizado.
Añadir el elemento Code Embed en Webflow
Con el código iframe HTTPS seguro copiado en el portapapeles, abra el Diseñador de Webflow y diríjase a la página y sección específicas donde desea que aparezca el mapa interactivo en 3D. En la interfaz de Webflow, localice el panel de selección de elementos. Desplácese por los componentes disponibles para encontrar el elemento Code Embed, que suele estar agrupado en componentes avanzados o personalizados. Arrastre este elemento y colóquelo dentro del contenedor de diseño, sección o bloque div de destino.
Al colocar el elemento, Webflow abrirá la interfaz de su editor de código personalizado. Pegue el código iframe de Georivo copiado directamente en esta ventana del editor. Asegúrese de que no se introduzcan espacios adicionales, caracteres extraños o etiquetas rotas durante el proceso. Una vez pegado, guarde y cierre el editor. Tenga en cuenta que, debido a que Webflow restringe la ejecución de código personalizado dentro del lienzo de diseño por razones de seguridad y estabilidad, verá un cuadro de marcador de posición en lugar del mapa interactivo en 3D activo. La visualización real solo se producirá en los dominios publicados de prueba o de producción.
Reglas de tamaño adaptativo y relación de aspecto
Para garantizar que su historia de ubicación en 3D se muestre de manera óptima en todos los tamaños de pantalla, debe establecer reglas claras de diseño adaptativo en Webflow. El iframe está diseñado para expandirse y llenar su contenedor principal, lo que significa que su ancho y alto deben establecerse al 100 por ciento dentro del fragmento de código personalizado. Esta estrategia de diseño delega todo el tamaño, la escala y los límites adaptativos al panel de estilos nativo de Webflow, lo que le permite gestionar el diseño de forma visual.
Cree un bloque div principal dedicado en Webflow para albergar el elemento Code Embed. Establezca la posición de este div principal como relativa. Para mantener una relación de aspecto constante, puede utilizar técnicas de relleno inferior basadas en porcentajes o aplicar restricciones de altura explícitas. En los puntos de ruptura para dispositivos móviles, es fundamental asegurarse de que el contenedor principal mantenga una altura mínima, por ejemplo, de 400 píxeles, para evitar que el mapa en 3D se contraiga o se recorte. Esta altura adecuada también garantiza que los usuarios móviles puedan interactuar cómodamente con los controles táctiles del mapa sin desplazar accidentalmente la página principal.
Publicación del dominio y pasos de verificación
Con el diseño configurado y el código personalizado guardado, el siguiente paso consiste en publicar su proyecto de Webflow para activar la integración. Haga clic en los controles de publicación en la interfaz de Webflow y seleccione los dominios autorizados, incluidos el subdominio de prueba y el dominio de producción personalizado principal. Inicie el proceso de publicación y espere a que Webflow confirme que los cambios están activos en la web.
Una vez publicado, navegue a la URL pública activa en un navegador web para verificar la integración. Debe probar la página tanto en ordenadores como en dispositivos móviles. Durante esta fase de verificación, compruebe que el acceso al dominio sea correcto y evalúe la velocidad de carga. Confirme que la atribución requerida de Google Maps Platform esté visible y correctamente ubicada, cumpliendo con el contexto de uso permitido para las imágenes activas. Asimismo, observe el comportamiento del consentimiento y cómo el widget gestiona las alternativas de respaldo si un usuario ha restringido ciertos scripts o si la conexión es lenta.
Diferencia entre la visualización en 3D y las imágenes de drones
Una directriz esencial para los profesionales del sector inmobiliario, desarrolladores y especialistas en marketing que utilizan Georivo es la clara distinción entre la visualización en 3D generada por ordenador y las imágenes reales grabadas con drones. Georivo crea historias de ubicación en 3D fotorrealistas e interactivas mediante el procesamiento de direcciones de propiedades y lugares cercanos utilizando imágenes geoespaciales con licencia. No aloja ni muestra grabaciones de vídeo físicas de drones ni archivos de vídeo estáticos.
Al presentar estos mapas interactivos a posibles compradores o clientes, las descripciones de sus anuncios y los materiales de marketing deben indicar claramente que la experiencia es una visualización en 3D y no una grabación de vídeo en directo realizada con un dron. Esta transparencia garantiza el cumplimiento total de los estándares publicitarios de la industria y evita cualquier representación engañosa del estado actual de la propiedad física. También ayuda a gestionar las expectativas de los clientes al destacar que la herramienta es una guía espacial interactiva diseñada para la exploración del vecindario y no una grabación física en tiempo real.
Resolución de errores comunes de integración
Si el mapa en 3D integrado no se muestra correctamente, se pueden diagnosticar y resolver varios problemas comunes. Un iframe en blanco o un error de bloqueo de dominio suelen indicar una discrepancia entre la URL del sitio web activo y la lista de dominios autorizados en el panel de control de Georivo. Verifique que el dominio exacto, incluidos los subdominios de prueba o los prefijos específicos, esté introducido correctamente en la configuración de Georivo. Incluso una pequeña diferencia ortográfica activará el bloqueo de seguridad.
Otros problemas comunes incluyen una visualización incorrecta de la altura y el recorte en dispositivos móviles. Si el iframe se contrae a una altura de cero, compruebe que el contenedor principal de Webflow tenga una altura explícita o una posición relativa con dimensiones definidas. Además, asegúrese de que las políticas de seguridad de contenido (CSP) o los bloqueos de contenido mixto en su proveedor de alojamiento no estén interfiriendo con la conexión HTTPS segura que requiere Georivo. Por último, verifique que la caché del navegador desactualizada o las herramientas de gestión de consentimiento no estén bloqueando la inicialización de los scripts del mapa interactivo.
Prácticas recomendadas de rendimiento y optimización
Para mantener un rendimiento óptimo del sitio y velocidades de carga rápidas en su sitio de Webflow, debe seguir las prácticas recomendadas para integrar medios interactivos de terceros. Debido a que los mapas en 3D fotorrealistas de Georivo procesan imágenes geoespaciales de alta resolución, cargarlos inmediatamente al iniciar la página puede afectar a las métricas web principales (Core Web Vitals) y a las puntuaciones de carga inicial de su sitio. Considere colocar el contenedor del mapa en una parte inferior de la página para que no forme parte del contenido crítico visible de inmediato.
Además, ya que desea optimizar el rendimiento, puede aprovechar la optimización nativa del navegador aplicando atributos de carga diferida (lazy loading) al elemento iframe. Esto indica al navegador que aplace la carga de los recursos interactivos en 3D hasta que el visitante se desplace cerca del contenedor del mapa, conservando el ancho de banda inicial y los ciclos de CPU para el contenido principal de Webflow. Este enfoque garantiza que su sitio web siga siendo rápido y ágil, al tiempo que ofrece una experiencia de ubicación interactiva y enriquecedora cuando el usuario esté listo para explorar el entorno del vecindario.
Limitaciones e idoneidad
Utilice este material para presentaciones y soporte en la toma de decisiones, no como sustituto de información de origen verificada de forma independiente. Confirme las rutas, distancias, accesos, disponibilidad, imágenes, límites legales, requisitos de la plataforma y condiciones actuales con la fuente autorizada correspondiente antes de su publicación o uso.
| Método de integración | Uso recomendado | Nivel de personalización | Plan de Webflow requerido |
|---|---|---|---|
| Elemento Code Embed | Páginas de propiedades individuales y páginas de destino personalizadas | Alto (Control total de CSS) | Core, Growth o cualquier plan de sitio |
| Código personalizado en texto enriquecido | Entradas de blog dinámicas y elementos de CMS de múltiples propiedades | Medio (Hereda estilos principales) | Plan CMS o Enterprise |
| Código personalizado para todo el sitio | Mapas globales mostrados en el encabezado de cada página | Bajo (Se aplica globalmente) | Cualquier plan de pago |
| Integración HTML en plantilla de CMS | Directorios de anuncios automatizados con URL dinámicas | Alto (Vinculación de campos dinámicos) | Plan CMS o Enterprise |
Flujo de trabajo paso a paso para la integración en Webflow
- Configure y publique su historia de ubicación en 3D interactiva dentro del panel de control de Georivo.
- Añada sus dominios exactos de Webflow (tanto de prueba como de producción) a la lista de dominios autorizados en Georivo.
- Copie el código de inserción seguro del iframe HTTPS generado por la plataforma Georivo.
- Abra el Diseñador de Webflow, navegue hasta la página de destino y arrastre un elemento Code Embed a su diseño.
- Pegue el código iframe copiado en el editor de código personalizado y guarde el elemento.
- Establezca el estilo del contenedor principal con posición relativa y una altura o relación de aspecto definida.
- Publique su proyecto de Webflow en los dominios autorizados de prueba o de producción.
- Pruebe la URL activa en varios dispositivos para verificar los controles interactivos y la visualización de las imágenes geoespaciales.
La visualización interactiva en 3D ofrece una alternativa escalable y conforme a las normativas frente a las filmaciones físicas con drones, lo que permite a los profesionales del sector inmobiliario mostrar el contexto de una propiedad sin retrasos meteorológicos ni restricciones de espacio aéreo.
Preguntas frecuentes
¿Por qué mi mapa integrado muestra un error de autorización de dominio?
Este error ocurre cuando la URL del sitio web activo no coincide con la lista de dominios autorizados en la configuración de Georivo. Asegúrese de haber añadido tanto su subdominio de prueba webflow.io como su dominio de producción personalizado a la lista de autorizados.
¿Puedo utilizar las integraciones de Georivo en un plan inicial gratuito de Webflow?
Webflow restringe el uso del elemento Code Embed en los planes iniciales gratuitos que no disponen de un plan de sitio activo. Para integrar HTML personalizado o iframes, ya que se requiere esta función, debe actualizar su espacio de trabajo de Webflow o añadir un plan de sitio de pago.
¿Cómo hago para que el mapa en 3D sea adaptativo en dispositivos móviles?
Establezca el ancho y el alto del iframe al 100 por ciento, y luego utilice un bloque div principal en Webflow para controlar las dimensiones. Asegúrese de que el div principal tenga una altura mínima de 400 píxeles en los puntos de ruptura móviles para permitir una interacción táctil cómoda.
¿Se actualizan en tiempo real las imágenes en 3D integradas?
Las imágenes en 3D consisten en datos geoespaciales con licencia de alta calidad. Aunque proporcionan una representación precisa y fotorrealista del contexto del vecindario, no se trata de una transmisión de vídeo en directo en tiempo real y debe distinguirse de las filmaciones físicas con drones.
¿Puedo integrar diferentes mapas en diferentes páginas de la colección CMS de Webflow?
Sí, puede añadir un elemento Code Embed a sus plantillas de colección de CMS de Webflow. Asegúrese de que cada elemento utilice su respectivo código iframe autorizado de Georivo copiado desde el panel de su widget publicado.
¿Afecta la integración al rendimiento SEO de mi sitio de Webflow?
Dado que las integraciones de Georivo se ejecutan dentro de un iframe, se cargan de forma independiente del contenido principal de la página de Webflow. El uso de atributos de carga diferida (lazy loading) en el iframe ayuda a aplazar la carga de recursos, manteniendo optimizadas la velocidad inicial de la página y las métricas web principales.