So betten Sie eine interaktive 3D-Karte von Georivo in Squarespace ein
Fügen Sie ein Georivo-HTTPS-Iframe mit einem Squarespace-Code-Block hinzu, prüfen Sie die Tarif-Kompatibilität, optimieren Sie das responsive Design, autorisieren Sie die Domain und prüfen Sie die veröffentlichte Seite.
Um eine Georivo-Standortpräsentation in Squarespace einzubetten, veröffentlichen Sie zuerst das Widget und autorisieren Sie die genaue öffentliche Domain Ihrer Website in Georivo. Kopieren Sie das generierte HTTPS-Iframe, fügen Sie es über das von der Plattform unterstützte HTML- oder Code-Element ein, behalten Sie das Seitenverhältnis bei und veröffentlichen Sie die Seite. Überprüfen Sie anschließend die Live-URL auf Desktop- und Mobilgeräten, einschließlich Domain-Freigabe, Ladeverhalten, Quellenangaben, Cookie-Einwilligung und Fallback-Verhalten.
Voraussetzungen und Tarif-Kompatibilität
Bevor Sie eine interaktive 3D-Standortpräsentation in Ihre Website integrieren, müssen Sie sicherstellen, dass alle technischen und administrativen Voraussetzungen vollständig erfüllt sind. Zunächst benötigen Sie ein veröffentlichtes Georivo-Widget in Ihrem Benutzerkonto. Dieses Widget stellt Ihre konfigurierte Immobilienpräsentation dar, die auf Vorlagen wie dem Property Showcase, der Neighborhood Story oder dem Arrival Guide basieren kann. Jede dieser Vorlagen nutzt lizenziertes Geodatenmaterial, um eine fotorealistische 3D-Umgebung mit programmierten Kamerabewegungen und benutzerdefinierten räumlichen Markierungen zu erstellen.
Zweitens müssen Sie sicherstellen, dass Sie über die entsprechenden Bearbeitungs- oder Administratorrechte für Ihre Squarespace-Website verfügen. Zudem ist es wichtig, Ihren Squarespace-Tarif vorab zu prüfen. Squarespace beschränkt die Nutzung von benutzerdefinierten Code-Blöcken, unformatiertem HTML und externen Iframe-Einbettungen auf bestimmte Premium-Tarife, in der Regel ab dem Business-Tarif. Wenn Ihre Website einen persönlichen oder Basis-Tarif nutzt, der keine Ausführung von benutzerdefiniertem Code erlaubt, wird die eingebettete 3D-Karte nicht geladen. Diese Plattform-Anforderung wurde am 24.07.2026 anhand der offiziellen Squarespace-Hilfedokumentation für Code-Blöcke überprüft.
Schließlich müssen Sie die Domain-Autorisierung in Ihrem Georivo-Dashboard konfigurieren. Georivo nutzt domaingebundene Einbettungen als zentrale Sicherheitsfunktion, um Ihre lizenzierten 3D-Geovisualisierungen zu schützen. Indem das Iframe so eingeschränkt wird, dass es nur auf Ihrer autorisierten öffentlichen Domain läuft, verhindern Sie, dass unbefugte Dritte Ihren Einbettungscode kopieren und Ihre interaktiven 3D-Inhalte auf nicht genehmigten externen Websites anzeigen. Sie müssen die genaue öffentliche Domain Ihrer Squarespace-Website in Georivo hinterlegen, damit die Einbettung auf Ihren Live-Seiten funktioniert.
Kopieren des Georivo-Einbettungscodes
Sobald alle Voraussetzungen erfüllt sind, können Sie den sicheren Iframe-Code aus Ihrem Georivo-Dashboard abrufen. Navigieren Sie zu den Projekteinstellungen für Ihre veröffentlichte 3D-Standortpräsentation. Im Freigabe- oder Veröffentlichungsbereich bietet das System eine spezielle Option zum Kopieren des Einbettungscodes an. Dieser Code ist als standardmäßiges HTTPS-Iframe-Element strukturiert, das die interaktive 3D-Umgebung sicher und nahtlos auf externen Plattformen lädt.
Beim Kopieren dieses Codes müssen Sie sich strikt an die Einbettungsvorgaben halten. Sie dürfen ausschließlich den exakten, unveränderten Iframe-Code verwenden, den Sie direkt aus der Benutzeroberfläche des veröffentlichten Georivo-Widgets kopiert haben. Versuchen Sie niemals, die geschützte URL oder das im Code eingebettete Sicherheits-Token offenzulegen, zu ändern oder manuell zu manipulieren. Das Ändern dieser Parameter oder der Versuch, die Quell-URL zurückzuentwickeln, macht den Sicherheits-Handshake ungültig, sodass das domaingebundene Schutzsystem die Anfrage blockiert und eine Fehlermeldung ausgibt.
Das kopierte Iframe-Snippet enthält bestimmte Standardattribute, einschließlich Breiten- und Höhenparametern, um ein grundlegendes Layout festzulegen. Belassen Sie diesen Code ohne manuelle Anpassungen in Ihrer Zwischenablage, da jede Änderung der Kernattribute die sichere Verbindung zwischen der Squarespace-Hosting-Umgebung und den Visualisierungsservern von Georivo beeinträchtigen kann.
Hinzufügen des Code-Blocks in Squarespace
Melden Sie sich mit dem kopierten HTTPS-Iframe-Code in Ihrer Zwischenablage bei Ihrem Squarespace-Konto an und navigieren Sie zum Seiteneditor für die Seite, auf der Sie die 3D-Karte anzeigen möchten. Suchen Sie den gewünschten Bereich in Ihrem Seitenlayout, in dem die Visualisierung Ihren Besuchern den größten Nutzen bringt, beispielsweise direkt unter den wichtigsten Details der Immobilie oder in einem eigenen Bereich zur Erkundung der Nachbarschaft.
Fügen dem ausgewählten Bereich einen neuen Block hinzu und wählen Sie den Code-Block aus den verfügbaren Optionen. Der Code-Block ist das dafür vorgesehene Element zur Darstellung von unformatiertem HTML und benutzerdefinierten Iframe-Snippets in Squarespace. Öffnen Sie nach dem Hinzufügen des Blocks dessen Einstellungen. Es ist wichtig, dass die Formateinstellung im Code-Block explizit auf HTML eingestellt ist. Wenn der Block im Nur-Text-Modus verbleibt, zeigt der Browser den unformatierten Code als Text an, anstatt das Iframe auszuführen und die interaktive 3D-Karte zu laden.
Fügen Sie den kopierten Georivo-Iframe-Code direkt in das Textfeld des Code-Blocks ein. Während der Arbeit im Squarespace-Editor sehen Sie möglicherweise einen Platzhalter oder einen Hinweis, dass die Vorschau deaktiviert wurde. Dies ist ein normales Verhalten der Plattform, um die Leistung des Editors zu optimieren und zu verhindern, dass externe Skripte oder komplexe WebGL-Kontexte die Bearbeitungsoberfläche stören. Die vollständige interaktive 3D-Standortpräsentation wird normal gerendert und funktioniert einwandfrei, sobald die Seite über die öffentliche Live-URL aufgerufen wird.
Responsive Layouts und Seitenverhältnisse anpassen
Um eine optimale Benutzererfahrung auf allen Geräten zu gewährleisten, müssen Sie das responsive Layout der eingebetteten 3D-Karte anpassen. Der von Georivo bereitgestellte Iframe-Code ist so konzipiert, dass er sich horizontal an die Breite seines Containers anpasst. Daher wird die Reaktionsfähigkeit der Karte maßgeblich davon beeinflusst, wie Sie den umgebenden Code-Block-Container in Ihrem Squarespace-Layout konfigurieren.
Wenn Sie das Layout-System von Squarespace verwenden, können Sie die Grenzen des Code-Blocks anpassen, um ein ausgewogenes Seitenverhältnis zu erzielen. Für Desktop-Bildschirme wird ein Breitbild-Seitenverhältnis wie 16:9 dringend empfohlen. Dieses Verhältnis stellt sicher, dass das fotorealistische 3D-Gelände, die programmierten Kamerabewegungen und die nahegelegenen Points of Interest gut sichtbar sind, ohne dass übermäßig viel vertikal gescrollt werden muss. Zudem bietet es den Nutzern genügend Platz, um komfortabel mit der Karte zu interagieren.
Wechseln Sie nach der Konfiguration des Desktop-Layouts in die mobile Bearbeitungsansicht von Squarespace. Da mobile Bildschirme nur über begrenzten horizontalen Platz verfügen, müssen Sie die Höhe und Breite des Code-Blocks speziell für mobile Viewports anpassen. Stellen Sie sicher, dass der Block hoch genug ist, damit die interaktiven Steuerelemente und die 3D-Visualisierung nicht gestaucht wirken, vermeiden Sie jedoch eine übermäßige Höhe, die den vertikalen Lesefluss Ihres mobilen Seitenlayouts stören könnte.
Veröffentlichen und Überprüfen der Live-Seite
Nachdem Sie den Code-Block positioniert und seine Abmessungen angepasst haben, speichern Sie Ihre Änderungen und veröffentlichen Sie die aktualisierte Seite. Die Überprüfung ist ein entscheidender letzter Schritt im Integrationsprozess. Da das Georivo-Widget eine domaingebundene Sicherheitsfunktion nutzt, können Sie seine Funktionalität nicht vollständig in der Squarespace-Bearbeitungsvorschau überprüfen. Sie müssen die öffentliche Live-URL testen, um zu bestätigen, dass alle Sicherheits- und Rendering-Prüfungen erfolgreich bestanden werden.
Öffnen Sie ein neues Browserfenster - am besten im Inkognito- oder privaten Modus, um aktive Editor-Sitzungen oder zwischengespeicherte Dateien zu umgehen - und rufen Sie die öffentliche Live-URL Ihrer Squarespace-Seite auf. Vergewissern Sie sich, dass die interaktive 3D-Karte vollständig geladen wird und die anfangs programmierten Kamerabewegungen flüssig abgespielt werden. Sobald die automatische Wiedergabe beendet ist, überprüfen Sie, ob der Live-Erkundungsmodus aktiv ist, sodass Sie durch Verschieben, Zoomen und Drehen der Ansicht mit der fotorealistischen 3D-Umgebung interagieren können.
Überprüfen Sie während dieses Verifizierungsprozesses sowohl das Desktop- als auch das mobile Layout. Stellen Sie sicher, dass alle erforderlichen Quellenangaben, die gemäß den Nutzungsbedingungen der Google Maps Platform obligatorisch sind, am unteren Rand der Kartenoberfläche deutlich sichtbar und lesbar sind. Überprüfen Sie außerdem, wie sich die Einbettung im Verhältnis zu den Cookie-Einwilligungsbannern oder Datenschutzeinstellungen Ihrer Website verhält, um sicherzustellen, dass keine externen Skriptblocker das Laden der Karte bei neuen Besuchern verhindern.
Fehlerbehebung bei häufigen Einbettungsproblemen
Wenn die eingebettete 3D-Karte auf Ihrer Live-Squarespace-Website nicht korrekt angezeigt wird, können Sie das Problem systematisch anhand einer Standard-Checkliste zur Fehlerbehebung angehen. Ein leeres Iframe oder ein expliziter Ladefehler wird am häufigsten durch eine blockierte oder nicht übereinstimmende Domain verursacht. Gehen Sie zurück zu Ihren Georivo-Projekteinstellungen und überprüfen Sie, ob die autorisierte Domain exakt mit Ihrer öffentlichen Squarespace-Live-URL übereinstimmt, einschließlich aller Subdomains oder Präfixe wie 'www'.
Ein weiteres potenzielles Hindernis ist eine Content Security Policy (CSP) oder eine Blockierung durch gemischte Inhalte (Mixed Content). Da Georivo eine sichere Verbindung erfordert, muss Ihre Squarespace-Website vollständig über HTTPS bereitgestellt werden. Wenn sich unsichere Elemente auf Ihrer Seite befinden, blockiert der Browser möglicherweise das Laden des sicheren Iframes. Suchen Sie außerdem nach veraltetem Browser-Cache oder restriktiven Cookie-Einwilligungen von Drittanbietern. Einige Datenschutz-Plugins oder Cookie-Management-Tools auf Ihrer Squarespace-Website blockieren externe Skripte oder WebGL-Frames, bis der Besucher ausdrücklich seine Zustimmung erteilt.
Layout-Probleme wie eine falsche Höhe oder eine abgeschnittene Darstellung auf Mobilgeräten können durch Anpassen der Container-Einstellungen behoben werden. Wenn die Karte vertikal gestaucht erscheint oder schwarze Balken aufweist, überprüfen Sie die Höhen- und Breitenattribute in Ihrem Iframe-Code oder passen Sie die Grenzen des Code-Blocks in der Fluid Engine von Squarespace an. Wenn Sie sicherstellen, dass die Breite des Iframes auf 100% eingestellt ist und der Container über ausreichend vertikalen Innenabstand (Padding) verfügt, lassen sich die meisten Probleme mit dem responsiven Layout beheben.
Leistungsoptimierung und Ladeverhalten
Da interaktive Karten von Georivo hochauflösende, lizenzierte Geodaten nutzen, um fotorealistische 3D-Umgebungen zu erstellen, ist es wichtig, deren Auswirkungen auf die Website-Performance zu steuern. Georivo-Einbettungen sind so konzipiert, dass sie asynchron geladen werden. Das bedeutet, dass sie den kritischen Rendering-Pfad Ihrer Squarespace-Seite nicht blockieren. Ihre primären Texte, Bilder und Navigationselemente werden zuerst geladen, was eine schnelle anfängliche Ladezeit für Ihre Besucher gewährleistet.
Um die Leistung weiter zu optimieren, können Sie ein natives Lazy Loading (verzögertes Laden) implementieren. Indem Sie das Attribut loading='lazy' direkt in Ihr kopiertes HTTPS-Iframe-Tag im Squarespace-Code-Block einfügen, weisen Sie moderne Browser an, das Herunterladen der 3D-Inhalte so lange zu verzögern, bis der Besucher tatsächlich zu dem Bereich mit der Karte hinunterscrollt. Dies spart Bandbreite und Rechenleistung, insbesondere bei mobilen Nutzern, die eventuell nicht bis zu den interaktiven Inhalten scrollen.
Vermeiden Sie es außerdem, mehrere interaktive 3D-Karten auf einer einzigen Seite einzubetten. Das gleichzeitige Laden mehrerer WebGL-Kontexte kann die Systemressourcen stark beanspruchen, was zu Leistungseinbußen auf älteren Mobilgeräten oder langsameren Computern führt. Wenn Sie mehrere Ansichten oder verschiedene Immobilien präsentieren möchten, ist es am besten, eine einzige primäre Einbettung auf der Seite zu verwenden und geschützte Freigabelinks für sekundäre Präsentationen oder detaillierte Nachbarschaftsberichte bereitzustellen.
Einschränkungen und Eignung
Obwohl Georivo ein leistungsstarkes Tool für Immobilienprofis, Vermarkter, Entwickler und Gastgewerbe-Teams ist, ist es wichtig, seine technischen Grenzen und Einsatzbereiche zu verstehen. Georivo ist eine interaktive 3D-Visualisierungsplattform, die auf lizenzierten Geodaten basiert; es handelt sich nicht um einen physischen Drohnenservice. Die Plattform bietet weder Echtzeit-Live-Video-Feeds von physischen Immobilien noch stellt sie einen echten Drohnenüberflug dar.
Da die Plattform auf zusammengestellten Geodatensätzen basiert, spiegelt die 3D-Umgebung kürzliche Bauarbeiten, temporäre Straßensperrungen oder aktuelle Wetterbedingungen möglicherweise nicht sofort wider. Vermarkter müssen diese interaktiven 3D-Visualisierungen in ihren Objektbeschreibungen klar von echten Drohnenaufnahmen abgrenzen, um die Erwartungen der Käufer realistisch zu steuern.
Darüber hinaus tragen die Nutzer die Verantwortung dafür, die Adressabdeckung im Georivo-System zu überprüfen, bevor sie Marketingkampagnen finalisieren. Sie müssen außerdem sicherstellen, dass Ihre Nutzung der interaktiven Karte den Nutzungsbedingungen der Google Maps Platform entspricht, insbesondere im Hinblick auf die Anzeige der erforderlichen Quellenangaben und den zulässigen Nutzungskontext der Live-Kartenerfahrung. Bitte beachten Sie schließlich, dass diese 3D-Visualisierungen für den räumlichen Kontext und die Darstellung der Nachbarschaft konzipiert sind; sie dienen nicht als Nachweis oder Festlegung von rechtlichen oder physischen Grundstücksgrenzen.
| Funktion / Einstellung | Empfohlener Wert | Zweck | Squarespace-Kompatibilität |
|---|---|---|---|
| Blocktyp | Code-Block | Rendert unformatiertes HTML und Iframe-Code sauber | Erfordert Business-Tarif oder höher |
| Formateinstellung | HTML | Verhindert, dass Squarespace die Iframe-Tags maskiert | In allen Code-Blöcken verfügbar |
| Iframe-Breite | 100% | Ermöglicht die Anpassung der Karte an die Containerbreite | Standardmäßige responsive Methode |
| Iframe-Höhe | 500px bis 600px | Bietet ausreichend vertikalen Platz für die 3D-Navigation | Anpassbar über benutzerdefiniertes CSS oder Fluid Engine |
| Lade-Attribut | lazy | Verbessert die anfängliche Ladezeit und Leistung der Seite | Von modernen Browsern unterstützt |
Schritte zur Autorisierung Ihrer Domain und Einbettung der
- Melden Sie sich in Ihrem Georivo-Dashboard an und wählen Sie das spezifische Immobilienprojekt aus, das Sie anzeigen möchten.
- Navigieren Sie zu den Freigabe-Einstellungen und geben Sie Ihre genaue öffentliche Squarespace-Domain ein, um sie zu autorisieren.
- Kopieren Sie das vollständige, generierte HTTPS-Iframe-Code-Snippet direkt in Ihre Zwischenablage.
- Öffnen Sie Ihren Squarespace-Seiteneditor, fügen Sie dem gewünschten Bereich einen Code-Block hinzu und stellen Sie das Format auf HTML ein.
- Fügen Sie den Iframe-Code in den Block ein, passen Sie die Abmessungen des Containers an und veröffentlichen Sie Ihre Änderungen, um die interaktive 3D-Karte live zu schalten.
Die Integration interaktiver 3D-Visualisierungen direkt in Immobilienseiten schließt die Lücke zwischen statischen Bildern und physischen Besichtigungen vor Ort und bietet Käufern sofortigen geografischen Kontext.
Häufige Fragen
Warum zeigt meine eingebettete Georivo-Karte auf meiner Live-Squarespace-Website einen leeren Bildschirm an?
Dies geschieht in der Regel, wenn die Live-Website-Domain in Ihren Georivo-Projekteinstellungen nicht autorisiert wurde. Stellen Sie sicher, dass die genaue öffentliche Domain, einschließlich aller Subdomains, zu Ihrer Liste der autorisierten Domains in Georivo hinzugefügt wurde.
Benötige ich einen Premium-Tarif von Squarespace, um eine Georivo 3D-Karte einzubetten?
Ja, Squarespace beschränkt die Nutzung von benutzerdefinierten Code-Blöcken und unformatierten HTML-/Iframe-Einbettungen in der Regel auf die Business- und Commerce-Tarife. Überprüfen Sie Ihr aktuelles Squarespace-Abonnement, um sicherzustellen, dass es benutzerdefinierten Code zulässt.
Wie unterscheidet sich eine Georivo 3D-Standortpräsentation von echten Drohnenaufnahmen?
Georivo verwendet lizenziertes Geodatenmaterial, um eine interaktive, fotorealistische 3D-Umgebung zu erstellen, die Nutzer aktiv erkunden können. Im Gegensatz zu einem vorab aufgezeichneten, statischen Drohnenvideo ermöglicht Georivo programmierte Kamerabewegungen und die Live-Erkundung nahegelegener Points of Interest nach der Wiedergabe.
Wird das Einbetten der 3D-Karte die Ladezeit meiner Squarespace-Website verlangsamen?
Georivo-Einbettungen sind so optimiert, dass sie asynchron geladen werden. Das bedeutet, dass sie das Rendern der Haupttexte und Bilder Ihrer Squarespace-Seite nicht blockieren. Um die Leistung weiter zu optimieren, können Sie das native Lazy Loading für das Iframe aktivieren.
Kann ich anstelle des Code-Blocks auch den standardmäßigen Squarespace-Einbettungs-Block verwenden?
Obwohl der Einbettungs-Block in einigen Tarifen mit unformatiertem Iframe-Code funktionieren kann, ist der auf HTML-Modus eingestellte Code-Block die zuverlässigste Methode, um benutzerdefinierte HTTPS-Iframe-Elemente ohne plattformspezifische Anpassungen darzustellen.
Was soll ich tun, wenn die 3D-Karte auf Mobilgeräten abgeschnitten aussieht?
Stellen Sie sicher, dass Ihr Iframe-Code responsives CSS verwendet, indem Sie beispielsweise die Breite auf 100% festlegen und die Höhe über Viewport-Einheiten oder einen Container mit festem Seitenverhältnis steuern. Sie sollten auch die mobilen Layout-Einstellungen in der Fluid Engine von Squarespace anpassen.