Cómo integrar un mapa 3D de Georivo en Squarespace
Añada un iframe HTTPS de Georivo con un bloque de código de Squarespace, confirme la compatibilidad del plan, hágalo adaptativo, autorice el dominio y verifique la página pública.
Para integrar una historia de ubicación de Georivo en Squarespace, 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 del consentimiento y la gestión de alternativas.
Requisitos previos y compatibilidad de planes
Antes de intentar integrar una historia de ubicación interactiva en 3D en su sitio web, debe confirmar que se cumplen por completo varios requisitos previos técnicos y administrativos. En primer lugar, debe tener un widget de Georivo publicado y listo en su cuenta. Este widget representa la presentación configurada de su propiedad, que puede utilizar plantillas como la Presentación de Propiedades, la Historia del Barrio o la Guía de Llegada. Cada una de estas plantillas se basa en imágenes geoespaciales con licencia para construir un entorno 3D fotorrealista, que incluye movimientos de cámara programados y marcadores espaciales personalizados.
En segundo lugar, debe asegurarse de tener el acceso de editor o administrador adecuado a su sitio web de Squarespace. Es fundamental verificar su plan de suscripción de Squarespace antes de continuar. Squarespace restringe el uso de bloques de código personalizados, HTML sin formato e integraciones de iframe externos a planes premium específicos, que normalmente comienzan con su plan de Empresa. Si su sitio web está en un plan personal o básico que no permite la ejecución de código personalizado, el mapa 3D integrado no se mostrará. Este requisito de la plataforma se verificó con la documentación de ayuda oficial sobre bloques de código de Squarespace el 24 de julio de 2026.
Por último, debe configurar la autorización de dominio dentro de su panel de control de Georivo. Georivo utiliza integraciones vinculadas a dominios como una función de seguridad fundamental para proteger sus visualizaciones geoespaciales con licencia. Al restringir el iframe para que se ejecute solo en su dominio público autorizado, evita que terceros no autorizados copien su código de integración y muestren su contenido 3D interactivo en sitios externos no aprobados. Debe introducir el dominio público exacto de su sitio de Squarespace en Georivo antes de que la integración funcione en sus páginas activas.
Copiar el código de integración de Georivo
Una vez que se cumplan todos los requisitos previos, puede recuperar el código iframe seguro desde su panel de control de Georivo. Diríjase a la configuración del proyecto para su historia de ubicación 3D publicada. Dentro del panel de compartir o publicar, el sistema proporciona una opción dedicada para copiar el código de integración. Este código está estructurado como un elemento iframe HTTPS estándar diseñado para cargar el entorno 3D interactivo de forma segura y fluida en plataformas externas.
Al copiar este código, debe cumplir estrictamente con el contrato de integración. Debe utilizar únicamente el código iframe exacto y sin alteraciones copiado directamente de la interfaz del widget de Georivo publicado. Nunca intente exponer, modificar o inventar manualmente la URL protegida o el token de seguridad integrado en el código. Modificar estos parámetros o intentar realizar ingeniería inversa en la URL de origen invalidará el protocolo de seguridad, lo que provocará que el sistema de protección vinculado al dominio bloquee la solicitud y muestre un error.
El fragmento de iframe copiado contiene atributos predeterminados específicos, incluidos los parámetros de ancho y alto, diseñados para establecer un diseño base. Mantenga este código copiado en su portapapeles sin realizar ajustes manuales, ya que cualquier modificación en los atributos de origen principales puede interferir con la conexión segura establecida entre el entorno de alojamiento de Squarespace y los servidores de visualización de Georivo.
Añadir el bloque de código en Squarespace
Con el código iframe HTTPS seguro copiado en su portapapeles, inicie sesión en su cuenta de Squarespace y diríjase al editor de páginas para la página específica donde desea mostrar el mapa 3D. Busque la sección de destino en el diseño de su página donde la visualización aporte el mayor valor a sus visitantes, como por ejemplo directamente debajo de los detalles principales de la propiedad o dentro de una sección dedicada a la exploración del barrio.
Añada un nuevo bloque a la sección elegida y seleccione el bloque de Código de las opciones disponibles. El bloque de Código es el elemento designado para renderizar HTML sin formato y fragmentos de iframe personalizados en Squarespace. Una vez añadido el bloque, abra su panel de configuración. Es esencial asegurarse de que la configuración de formato dentro del bloque de Código esté establecida específicamente en HTML. Si el bloque se deja en modo de texto sin formato, el navegador mostrará el código sin formato como texto en lugar de ejecutar el iframe para cargar el mapa 3D interactivo.
Pegue el código iframe de Georivo copiado directamente en el área de texto del bloque de Código. Mientras trabaja en el editor de Squarespace, es posible que vea un marcador de posición o un mensaje que indica que la vista previa se ha desactivado. Este es un comportamiento estándar de la plataforma diseñado para optimizar el rendimiento del editor y evitar que scripts externos o contextos WebGL complejos interfieran con la interfaz de edición. La historia de ubicación 3D interactiva completa se renderizará y funcionará normalmente una vez que se acceda a la página a través de la URL pública activa.
Gestionar el diseño adaptativo y las relaciones de aspecto
Para garantizar una experiencia de usuario fluida en todos los dispositivos, debe gestionar el diseño adaptativo del mapa 3D integrado. El código iframe proporcionado por Georivo está diseñado para escalarse horizontalmente para llenar el ancho de su contenedor. Por lo tanto, la capacidad de respuesta del mapa depende en gran medida de cómo configure el contenedor del bloque de Código circundante dentro de su diseño de Squarespace.
Al utilizar el motor de diseño de Squarespace, puede ajustar los límites del bloque de Código para establecer una relación de aspecto equilibrada. Para pantallas de ordenador, se recomienda encarecidamente mantener una relación de aspecto de pantalla ancha, como 16:9. Esta proporción garantiza que el terreno 3D fotorrealista, los movimientos de cámara programados y los puntos de interés cercanos sean claramente visibles sin necesidad de un desplazamiento vertical excesivo. También proporciona suficiente espacio para que los usuarios interactúen con el mapa cómodamente.
Después de configurar el diseño para ordenadores, cambie a la vista de edición móvil dentro de Squarespace. Debido a que las pantallas móviles tienen un espacio horizontal limitado, debe ajustar la altura y el ancho del bloque de Código específicamente para las pantallas móviles. Asegúrese de que el bloque sea lo suficientemente alto como para evitar que los controles interactivos y la visualización 3D se sientan apretados, evitando al mismo tiempo una altura excesiva que pueda interrumpir el flujo vertical del diseño de su página móvil.
Publicar y verificar la página activa
Después de colocar el bloque de Código y ajustar sus dimensiones, guarde los cambios y publique la página actualizada para que esté activa. La verificación es un paso final crítico en el proceso de integración. Debido a que el widget de Georivo utiliza seguridad vinculada al dominio, no puede verificar completamente su funcionalidad únicamente dentro de la vista previa de edición de Squarespace. Debe probar la URL pública activa para confirmar que todas las comprobaciones de seguridad y renderizado se realizan correctamente.
Abra una nueva ventana del navegador, idealmente en modo de incógnito o navegación privada para evitar sesiones de edición activas o archivos almacenados en caché, y navegue a la URL pública activa de su página de Squarespace. Confirme que el mapa 3D interactivo se carga por completo y que los movimientos de cámara programados iniciales se reproducen sin problemas. Una vez que finalice la reproducción automática, verifique que el modo de exploración activa esté funcionando, lo que le permitirá interactuar con el entorno 3D fotorrealista desplazándose, haciendo zoom y rotando la vista.
Durante este proceso de verificación, compruebe tanto el diseño para ordenadores como para dispositivos móviles. Asegúrese de que todas las atribuciones requeridas, que son obligatorias según las Condiciones del Servicio de Google Maps Platform, sean claramente visibles y legibles en la parte inferior de la interfaz del mapa. Además, verifique cómo se comporta la integración en relación con los banners de consentimiento de cookies o la configuración de privacidad de su sitio, asegurándose de que ningún bloqueo de scripts externos impida que el mapa se cargue para los nuevos visitantes.
Resolución de problemas comunes de integración
Si el mapa 3D integrado no se muestra correctamente en su sitio activo de Squarespace, puede solucionar el problema sistemáticamente utilizando una lista de comprobación estándar. Un iframe en blanco o un error de carga explícito suele deberse a un dominio bloqueado o que no coincide. Vuelva a la configuración de su proyecto en Georivo y verifique que el dominio autorizado coincida exactamente con la URL pública activa de Squarespace, incluidos los subdominios o prefijos como 'www'.
Otro obstáculo potencial es una Política de Seguridad de Contenido (CSP) o un bloqueo de contenido mixto. Debido a que Georivo requiere una conexión segura, su sitio de Squarespace debe servirse completamente a través de HTTPS. Si hay elementos no seguros en su página, el navegador puede bloquear la carga del iframe seguro. Además, compruebe si la caché del navegador está desactualizada o si existen bloqueos de consentimiento de terceros muy estrictos. Algunos complementos de privacidad o herramientas de gestión de cookies en su sitio de Squarespace pueden bloquear scripts externos o marcos WebGL hasta que el visitante otorgue su consentimiento explícito.
Los problemas de diseño, como una altura incorrecta o una visualización recortada en dispositivos móviles, se pueden resolver ajustando la configuración del contenedor. Si el mapa aparece aplastado verticalmente o tiene barras negras, revise los atributos de altura y ancho en su código iframe o cambie el tamaño de los límites del bloque de Código dentro del Fluid Engine de Squarespace. Asegurarse de que el ancho del iframe esté establecido en 100% y que el contenedor tenga un relleno vertical adecuado resolverá la mayoría de los problemas de diseño adaptativo.
Optimización del rendimiento y comportamiento de carga
Dado que los mapas interactivos de Georivo utilizan imágenes geoespaciales con licencia de alta resolución para construir entornos 3D fotorrealistas, es importante gestionar su impacto en el rendimiento de la página. Las integraciones de Georivo están diseñadas para cargarse de forma asíncrona, lo que significa que no bloquean la ruta de renderizado crítica de su página de Squarespace. El texto principal, las imágenes y los elementos de navegación se cargarán primero, garantizando una velocidad de página inicial rápida para sus visitantes.
Para optimizar aún más el rendimiento, puede implementar la carga diferida nativa. Al añadir el atributo loading='lazy' directamente a su etiqueta iframe HTTPS copiada dentro del bloque de Código de Squarespace, indica a los navegadores modernos que retrasen la descarga de los recursos 3D hasta que el visitante se desplace realmente hacia abajo hasta la sección que contiene el mapa. Esto ahorra ancho de banda y potencia de procesamiento, especialmente para los usuarios móviles que podrían no desplazarse hacia abajo para ver el contenido interactivo.
Además, evite integrar múltiples mapas 3D interactivos en una sola página. Cargar múltiples contextos WebGL simultáneamente puede sobrecargar los recursos del sistema, lo que provoca una degradación del rendimiento en dispositivos móviles más antiguos u ordenadores más lentos. Si necesita mostrar múltiples vistas o diferentes propiedades, lo mejor es utilizar una única integración principal en la página y proporcionar enlaces para compartir protegidos para presentaciones secundarias o historias detalladas del barrio.
Limitaciones e idoneidad
Si bien Georivo es una herramienta potente para profesionales inmobiliarios, especialistas en marketing, desarrolladores y equipos de hostelería, es esencial comprender sus limitaciones técnicas y sus límites de idoneidad. Georivo es una plataforma de visualización interactiva en 3D impulsada por imágenes geoespaciales con licencia; no es un servicio de producción física con drones. No proporciona transmisiones de vídeo en tiempo real y en directo de propiedades físicas, ni representa un sobrevuelo físico con drones.
Debido a que la plataforma se basa en conjuntos de datos geoespaciales recopilados, es posible que el entorno 3D no refleje de inmediato construcciones recientes, cierres temporales de carreteras o condiciones meteorológicas actuales. Los especialistas en marketing deben distinguir claramente estas visualizaciones 3D interactivas de las imágenes de drones físicos en las descripciones de sus anuncios para gestionar las expectativas de los compradores con precisión.
Además, los usuarios tienen la responsabilidad de verificar la cobertura de las direcciones en el sistema de Georivo antes de finalizar las campañas de marketing. También debe asegurarse de que el uso del mapa interactivo cumpla con las Condiciones del Servicio de Google Maps Platform, especialmente en lo que respecta a la visualización de las atribuciones requeridas y el contexto de uso permitido de la experiencia cartográfica en directo. Por último, tenga en cuenta que estas visualizaciones en 3D están diseñadas para ofrecer contexto espacial y narración de historias de barrios; no demuestran ni establecen límites legales o físicos de las propiedades.
| Característica / Configuración | Valor recomendado | Propósito | Compatibilidad con Squarespace |
|---|---|---|---|
| Tipo de bloque | Bloque de código | Renderiza HTML sin formato y código iframe de forma limpia | Requiere plan de Empresa o superior |
| Configuración de formato | HTML | Evita que Squarespace escape las etiquetas iframe | Disponible en todos los bloques de código |
| Ancho del iframe | 100% | Permite que el mapa se adapte al ancho del contenedor | Práctica adaptativa estándar |
| Alto del iframe | 500px a 600px | Proporciona un espacio vertical adecuado para la navegación 3D | Ajustable mediante CSS personalizado o Fluid Engine |
| Atributo de carga | lazy | Mejora la velocidad de carga inicial de la página y el rendimiento | Compatible con navegadores modernos |
Pasos para autorizar su dominio e integrar el mapa
- Inicie sesión en su panel de control de Georivo y seleccione el proyecto de propiedad específico que desea mostrar.
- Diríjase a la configuración de Compartir e introduzca el dominio público exacto de su Squarespace para autorizarlo.
- Copie el fragmento de código iframe HTTPS generado por completo directamente en su portapapeles.
- Open su editor de páginas de Squarespace, añada un bloque de Código a la sección deseada y configure el formato en HTML.
- Pegue el código iframe en el bloque, ajuste las dimensiones del contenedor y publique sus cambios para activar el mapa 3D interactivo.
Integrar la visualización interactiva en 3D directamente en las páginas de las propiedades reduce la distancia entre las imágenes estáticas y las visitas físicas al sitio, ofreciendo a los compradores un contexto geográfico inmediato.
Preguntas frecuentes
¿Por qué mi mapa de Georivo integrado muestra una pantalla en blanco en mi sitio activo de Squarespace?
Esto suele ocurrir si el dominio del sitio web activo no ha sido autorizado en la configuración de su proyecto de Georivo. Asegúrese de añadir el dominio público exacto, incluidos los subdominios, a su lista de dominios autorizados en Georivo.
¿Necesito un plan premium de Squarespace para integrar un mapa 3D de Georivo?
Sí, Squarespace normalmente restringe el uso de bloques de Código personalizados e integraciones de HTML/iframe sin formato a sus planes de Empresa y Comercio. Compruebe su suscripción actual de Squarespace para asegurarse de que permite código personalizado.
¿En qué se diferencia una historia de ubicación 3D de Georivo de las imágenes de un dron físico?
Georivo utiliza imágenes geoespaciales con licencia para construir un entorno 3D interactivo y fotorrealista que los usuarios pueden explorar activamente. A diferencia de un vídeo de dron estático y grabado previamente, Georivo permite movimientos de cámara programados y la exploración en directo de puntos de interés cercanos después de la reproducción.
¿La integración del mapa 3D ralentizará la velocidad de carga de mi sitio web de Squarespace?
Las integraciones de Georivo están optimizadas para cargarse de forma asíncrona, lo que significa que no impiden que el texto y las imágenes principales de su página de Squarespace se rendericen. Para optimizar aún más el rendimiento, puede habilitar la carga diferida nativa en el iframe.
¿Can I use the standard Squarespace Embed block instead of the Code block?
Aunque el bloque de Integración puede funcionar con código iframe sin formato en algunos planes, el bloque de Código configurado en modo HTML es el método más fiable para renderizar elementos iframe HTTPS personalizados sin modificaciones específicas de la plataforma.
¿Qué debo hacer si el mapa 3D se ve recortado en dispositivos móviles?
Asegúrese de que el código de su iframe utilice CSS adaptativo, como establecer el ancho al 100% y gestionar la altura con unidades de viewport o un contenedor con relación de aspecto fija. También debe ajustar la configuración de diseño móvil en el Fluid Engine de Squarespace.