Как встроить 3D-карту Georivo на сайт Squarespace
Добавьте HTTPS-iframe от Georivo с помощью блока кода Squarespace, проверьте поддержку тарифа, настройте адаптивность, авторизуйте домен и проверьте опубликованную страницу.
Чтобы встроить интерактивную 3D-карту Georivo на сайт Squarespace, сначала опубликуйте виджет и авторизуйте точный домен вашего публичного сайта в панели Georivo. Скопируйте сгенерированный код HTTPS-iframe, добавьте его через поддерживаемый платформой элемент HTML или блок кода, сохраните соотношение сторон и опубликуйте страницу. Проверьте работу на опубликованном URL-адресе для компьютеров и мобильных устройств, включая доступ к домену, загрузку, указание авторства, обработку согласия на файлы cookie и резервные сценарии.
Предварительные требования и поддержка тарифных планов
Перед интеграцией интерактивной 3D-карты на ваш сайт необходимо убедиться, что все технические и административные требования полностью выполнены. Во-первых, в вашем аккаунте должен быть готов опубликованный виджет Georivo. Этот виджет представляет собой настроенную презентацию объекта недвижимости, созданную на основе таких шаблонов, как «Презентация объекта», «Обзор района» или «Руководство по прибытию». Каждый из этих шаблонов использует лицензированные геопространственные снимки для построения фотореалистичной 3D-среды с запрограммированным движением камеры и пользовательскими пространственными маркерами.
Во-вторых, вам понадобятся права редактора или администратора вашего сайта Squarespace. Перед началом работы обязательно проверьте ваш тарифный план Squarespace. Платформа ограничивает использование пользовательских блоков кода, чистого HTML и внешних фреймов iframe, разрешая их только на премиум-тарифах, обычно начиная с плана «Business». Если ваш сайт находится на персональном или базовом тарифе, не поддерживающем выполнение пользовательского кода, встроенная 3D-карта не будет отображаться. Это требование платформы было проверено по официальной справочной документации по блокам кода Squarespace от 24 июля 2026 года.
Наконец, необходимо настроить авторизацию домена в панели управления Georivo. Georivo использует привязку встроенного кода к домену в качестве ключевой функции безопасности для защиты ваших лицензированных геопространственных визуализаций. Ограничивая работу iframe только вашим авторизованным публичным доменом, вы предотвращаете копирование вашего кода сторонними лицами для отображения вашего интерактивного 3D-контента на неутвержденных внешних сайтах. Вам нужно ввести точный публичный домен вашего сайта Squarespace в Georivo, прежде чем код начнет работать на опубликованных страницах.
Копирование кода встраивания Georivo
После выполнения всех предварительных условий вы можете получить безопасный код iframe в панели управления Georivo. Перейдите в настройки проекта вашей опубликованной интерактивной 3D-карты. В панели публикации или совместного доступа система предложит специальную опцию для копирования кода встраивания. Этот код представляет собой стандартный элемент HTTPS-iframe, предназначенный для безопасной и бесшовной загрузки интерактивной 3D-среды на сторонних платформах.
При копировании этого кода вы должны строго соблюдать правила интеграции. Разрешается использовать только точный, неизмененный код iframe, скопированный непосредственно из интерфейса опубликованного виджета Georivo. Никогда не пытайтесь извлечь, изменить или вручную воссоздать защищенный URL-адрес или токен безопасности, встроенный в код. Изменение этих параметров или попытка реверс-инжиниринга исходного URL-адреса нарушит проверку безопасности, из-за чего система защиты заблокирует запрос и отобразит ошибку.
Скопированный фрагмент iframe содержит определенные атрибуты по умолчанию, включая параметры ширины и высоты, задающие базовый макет. Сохраняйте этот код в буфере обмена без ручных правок, так как любые изменения ключевых атрибутов источника могут нарушить безопасное соединение между хостингом Squarespace и серверами визуализации Georivo.
Добавление блока кода в Squarespace
Скопировав безопасный код HTTPS-iframe в буфер обмена, войдите в свой аккаунт Squarespace и перейдите в редактор страницы, на которой вы хотите разместить 3D-карту. Найдите нужный раздел в макете страницы, где визуализация принесет наибольшую пользу посетителям, например, сразу под основными характеристиками объекта или в специальном разделе для изучения окрестностей.
Добавьте новый блок в выбранный раздел и выберите блок «Code» из доступных вариантов. Блок «Code» предназначен для рендеринга чистого HTML и пользовательских фрагментов iframe в Squarespace. После добавления блока откройте панель его настроек. Важно убедиться, что в настройках формата блока кода выбран именно HTML. Если оставить блок в режиме простого текста, браузер отобразит исходный код как текст вместо выполнения iframe для загрузки интерактивной 3D-карты.
Вставьте скопированный код iframe Georivo прямо в текстовое поле блока «Code». Во время работы в редакторе Squarespace вы можете увидеть заглушку или сообщение о том, что предварительный просмотр отключен. Это стандартное поведение платформы, предназначенное для оптимизации работы редактора и предотвращения конфликтов внешних скриптов или сложных контекстов WebGL с интерфейсом редактирования. Интерактивная 3D-карта будет полностью отображаться и работать корректно при просмотре страницы по ее опубликованному публичному URL-адресу.
Настройка адаптивного макета и соотношения сторон
Чтобы обеспечить удобство пользователей на всех устройствах, необходимо настроить адаптивный макет встроенной 3D-карты. Код iframe, предоставляемый Georivo, масштабируется по горизонтали, заполняя всю ширину своего контейнера. Таким образом, адаптивность карты во многом зависит от того, как вы настроите контейнер блока «Code» в макете Squarespace.
При использовании конструктора макетов Squarespace вы можете изменять границы блока «Code» для создания сбалансированного соотношения сторон. Для экранов компьютеров настоятельно рекомендуется сохранять широкоэкранное соотношение сторон, например 16:9. Пропорции такого формата гарантируют, что фотореалистичный 3D-ландшафт, запрограммированные движения камеры и близлежащие достопримечательности будут хорошо видны без необходимости чрезмерной вертикальной прокрутки. Это также оставляет достаточно места для комфортного взаимодействия пользователей с картой.
После настройки макета для компьютеров переключитесь на мобильный режим редактирования в Squarespace. Поскольку экраны мобильных устройств имеют ограниченную ширину, вам необходимо настроить высоту и ширину блока «Code» специально для мобильных экранов. Убедитесь, что блок достаточно высокий, чтобы интерактивные элементы управления и 3D-визуализация не выглядели сжатыми, но при этом избегайте избыточной высоты, которая может нарушить вертикальную структуру мобильного макета.
Публикация и проверка страницы
После размещения блока «Code» и настройки его размеров сохраните изменения и опубликуйте обновленную страницу. Проверка является важнейшим финальным шагом в процессе интеграции. Поскольку виджет Georivo использует защиту с привязкой к домену, вы не сможете полностью проверить его работу в режиме предварительного просмотра Squarespace. Вам необходимо протестировать опубликованный публичный URL-адрес, чтобы убедиться в успешном прохождении всех проверок безопасности и рендеринга.
Откройте новое окно браузера (желательно в режиме инкогнито или приватного просмотра, чтобы обойти активные сессии редактора и кэшированные файлы) и перейдите по опубликованному публичному URL-адресу вашей страницы Squarespace. Убедитесь, что интерактивная 3D-карта полностью загружается, а начальные запрограммированные движения камеры воспроизводятся плавно. После завершения автоматического воспроизведения проверьте работу режима свободного обзора, позволяющего перемещаться по фотореалистичной 3D-среде, приближать, отдалять и вращать камеру.
В процессе проверки оцените макеты как для компьютеров, так и для мобильных устройств. Убедитесь, что все необходимые указания авторства, обязательные в соответствии с Условиями использования Google Maps Platform, четко видны и читаемы в нижней части интерфейса карты. Дополнительно проверьте, как встроенный код взаимодействует с баннерами согласия на файлы cookie или настройками конфиденциальности вашего сайта, чтобы внешние скрипты не блокировали загрузку карты для новых посетителей.
Устранение распространенных проблем со встраиванием
Если встроенная 3D-карта некорректно отображается на вашем опубликованном сайте Squarespace, вы можете систематически устранить проблему с помощью стандартного чеклиста. Пустой фрейм iframe или явная ошибка загрузки чаще всего вызваны блокировкой или несовпадением домена. Вернитесь в настройки проекта Georivo и убедитесь, что авторизованный домен точно совпадает с публичным URL-адресом вашего сайта Squarespace, включая любые поддомены или префиксы вроде «www».
Другим возможным препятствием может быть политика безопасности контента (CSP) или блокировка смешанного содержимого. Поскольку Georivo требует безопасного соединения, ваш сайт Squarespace должен работать исключительно по протоколу HTTPS. Если на вашей странице есть небезопасные элементы, браузер может заблокировать загрузку защищенного iframe. Также проверьте устаревший кэш браузера или агрессивные блокировки согласий сторонних сервисов. Некоторые плагины конфиденциальности или инструменты управления cookie на вашем сайте Squarespace могут блокировать внешние скрипты или фреймы WebGL до тех пор, пока посетитель явно не даст согласие.
Проблемы с макетом, такие как неправильная высота или обрезанное отображение на мобильных устройствах, можно решить путем настройки параметров контейнера. Если карта выглядит сжатой по вертикали или имеет черные полосы, проверьте атрибуты высоты и ширины в коде iframe или измените размеры границ блока «Code» в редакторе Fluid Engine от Squarespace. Установка ширины iframe на 100% и обеспечение достаточного вертикального отступа контейнера решат большинство проблем с адаптивным макетом.
Оптимизация производительности и особенности загрузки
Поскольку интерактивные карты Georivo используют лицензированные геопространственные снимки высокого разрешения для построения фотореалистичных 3D-сред, важно контролировать их влияние на производительность страницы. Встроенный код Georivo разработан для асинхронной загрузки, что означает, что он не блокирует критический путь рендеринга вашей страницы Squarespace. Основной текст, изображения и элементы навигации загрузятся первыми, обеспечивая высокую скорость первоначальной загрузки страницы для ваших посетителей.
Для дополнительной оптимизации производительности вы можете использовать нативную ленивую загрузку. Добавив атрибут loading='lazy' непосредственно в тег HTTPS-iframe внутри блока кода Squarespace, вы дадите команду современным браузерам отложить загрузку 3D-ресурсов до тех пор, пока посетитель действительно не прокрутит страницу до раздела с картой. Это экономит трафик и вычислительные ресурсы, особенно для мобильных пользователей, которые могут не дойти до просмотра интерактивного контента.
Кроме того, избегайте встраивания нескольких интерактивных 3D-карт на одну страницу. Одновременная загрузка нескольких контекстов WebGL может перегрузить системные ресурсы, что приведет к снижению производительности на старых мобильных устройствах или медленных компьютерах. Если вам нужно показать несколько ракурсов или разные объекты, лучше всего использовать одно основное встраивание на странице, а для второстепенных презентаций или подробных обзоров районов предоставить защищенные ссылки для совместного доступа.
Ограничения и применимость
Хотя Georivo является мощным инструментом для специалистов по недвижимости, маркетологов, застройщиков и представителей сферы гостеприимства, важно понимать его технические ограничения и границы применимости. Georivo представляет собой интерактивную платформу 3D-визуализации на основе лицензированных геопространственных снимков, а не службу аэросъемки физическими дронами. Она не транслирует видео с физических объектов в реальном времени и не заменяет реальный облет дрона.
Поскольку платформа опирается на скомпилированные наборы геопространственных данных, 3D-среда может не сразу отражать недавнее строительство, временное закрытие дорог или текущие погодные условия. Маркетологи должны четко разграничивать эти интерактивные 3D-визуализации и реальные кадры с дронов в описаниях объектов, чтобы точно управлять ожиданиями покупателей.
Кроме того, пользователи несут ответственность за проверку покрытия адресов в системе Georivo перед запуском маркетинговых кампаний. Вы также должны убедиться, что использование интерактивной карты соответствует Условиям использования Google Maps Platform, особенно в отношении отображения обязательных указаний авторства и разрешенного контекста использования интерактивных карт. Наконец, обратите внимание, что эти 3D-визуализации предназначены для пространственного контекста и обзора окрестностей; они не подтверждают и не устанавливают юридические или физические границы собственности.
| Функция / Настройка | Рекомендуемое значение | Назначение | Совместимость со Squarespace |
|---|---|---|---|
| Тип блока | Блок кода (Code Block) | Чистый рендеринг HTML и кода iframe | Требуется тариф Business или выше |
| Настройка формата | HTML | Предотвращает экранирование тегов iframe в Squarespace | Доступно во всех блоках кода |
| Ширина iframe | 100% | Позволяет карте масштабироваться под ширину контейнера | Стандартный метод адаптивности |
| Высота iframe | от 500px до 600px | Обеспечивает достаточное вертикальное пространство для 3D-навигации | Настраивается через пользовательский CSS или Fluid Engine |
| Атрибут загрузки | lazy | Улучшает скорость первоначальной загрузки страницы и производительность | Поддерживается современными браузерами |
Шаги по авторизации домена и встраиванию карты
- Войдите в панель управления Georivo и выберите конкретный проект недвижимости для отображения.
- Перейдите в настройки совместного доступа (Share) и введите точный публичный домен Squarespace для его авторизации.
- Скопируйте сгенерированный фрагмент кода HTTPS-iframe целиком в буфер обмена.
- Открыв редактор страниц Squarespace, добавьте блок Code в нужный раздел и установите формат HTML.
- Вставьте код iframe в блок, настройте размеры контейнера и опубликуйте изменения, чтобы запустить интерактивную 3D-карту.
Интеграция интерактивной 3D-визуализации непосредственно на страницы объектов недвижимости сокращает разрыв между статичными изображениями и физическим посещением объекта, предоставляя покупателям мгновенный географический контекст.
Частые вопросы
Почему моя встроенная карта Georivo показывает пустой экран на опубликованном сайте Squarespace?
Обычно это происходит, если домен опубликованного сайта не был авторизован в настройках вашего проекта Georivo. Убедитесь, что точный публичный домен, включая любые поддомены, добавлен в список авторизованных доменов в Georivo.
Нужен ли мне премиум-тариф Squarespace для встраивания 3D-карты Georivo?
Да, Squarespace обычно ограничивает использование пользовательских блоков кода и встраивание чистого HTML/iframe своими тарифами Business и Commerce. Проверьте вашу текущую подписку Squarespace, чтобы убедиться, что она разрешает использование пользовательского кода.
Чем интерактивная 3D-карта Georivo отличается от реальной съемки с дрона?
Georivo использует лицензированные геопространственные снимки для построения интерактивной фотореалистичной 3D-среды, которую пользователи могут активно исследовать самостоятельно. В отличие от предварительно записанного статичного видео с дрона, Georivo позволяет использовать запрограммированные движения камеры и свободное изучение близлежащих достопримечательностей после завершения воспроизведения.
Замедлит ли встраивание 3D-карты скорость загрузки моего сайта Squarespace?
Встроенные карты Georivo оптимизированы для асинхронной загрузки. Это значит, что они не блокируют рендеринг основного текста и изображений вашей страницы Squarespace. Для дополнительной оптимизации производительности вы можете включить нативную ленивую загрузку для iframe.
Могу ли я использовать стандартный блок встраивания (Embed) Squarespace вместо блока кода (Code)?
Хотя блок Embed на некоторых тарифах может работать с чистым кодом iframe, блок Code в режиме HTML является наиболее надежным методом для рендеринга пользовательских элементов HTTPS-iframe без специфических для платформы изменений.
Что делать, если 3D-карта выглядит обрезанной на мобильных устройствах?
Убедитесь, что ваш код iframe использует адаптивный CSS, например, ширина установлена на 100%, а высота регулируется с помощью единиц измерения экрана или контейнера с фиксированным соотношением сторон. Вам также следует скорректировать настройки мобильного макета в редакторе Fluid Engine от Squarespace.