So binden Sie eine 3D-Karte in eine Immobilien-Website ein
Planen, betten und verifizieren Sie eine interaktive 3D-Immobilienkarte mit responsivem Container, Domain-Freigabe, Lazy Loading, Attributierung und Mobilgeraete-Pruefung.
Um eine 3D-Karte in eine Immobilien-Website einzubinden, veroeffentlichen Sie die Standort-Story, autorisieren Sie die Website-Domain, kopieren Sie den generierten HTTPS-Iframe, platzieren Sie ihn in einem responsiven Embed-Block und verifizieren Sie ihn auf der oeffentlichen Domain. Ueberpruefen Sie die Darstellung auf Mobilgeraeten, das Lazy Loading, die Attributierung, das Verhalten bei Cookie-Einwilligungen und ob das geschuetzte Widget nach der Veroeffentlichung korrekt geladen wird. Nutzen Sie die plattformspezifische Anleitung fuer die genauen Schritte im Editor.
Voraussetzungen fuer interaktive 3D-Karten
Bevor Sie eine interaktive 3D-Karte in Ihre Immobilien-Website integrieren, muessen Sie die erforderlichen Assets zusammenstellen und die technische Kompatibilitaet pruefen. Im Gegensatz zu einfachen statischen Bildern oder passiven Videodateien basiert eine interaktive 3D-Karte auf dem Echtzeit-Rendering von lizenzierten Geodaten. Das bedeutet, dass Ihre Hosting-Umgebung sicheres HTTPS-Rendering unterstuetzen und benutzerdefinierte Iframe-Integrationen zulassen muss. Sie benoetigen eine verifizierte Immobilienadresse, eine Liste der umliegenden Points of Interest sowie administrativen Zugriff auf das Content-Management-System Ihrer Website.
Zudem sollten Sie das passende Story-Template basierend auf Ihrem Marketingziel auswaehlen. Georivo unterstuetzt drei Hauptvorlagen: Property Showcase, Neighborhood Story und Arrival Guide. Das Template Property Showcase konzentriert sich auf die unmittelbaren Grenzen des Grundstuecks. Die Neighborhood Story hebt lokale Annehmlichkeiten, Schulen und Verkehrsanbindungen hervor. Der Arrival Guide bietet Besuchern eine klare visuelle Wegbeschreibung. Wenn Sie diese Parameter im Vorfeld definieren, stellen Sie sicher, dass die Kamerabewegungen und interaktiven Elemente korrekt programmiert sind, bevor Sie den Embed-Code generieren.
Es ist ausserdem wichtig, die Adressabdeckung und die Verfuegbarkeit des Bildmaterials auf der Plattform zu pruefen, bevor Sie eine Story veroeffentlichen. Obwohl die lizenzierten Geodaten die ueberwiegende Mehrheit der bebauten Gebiete abdecken, stellt diese Pruefung in der Vorbereitungsphase sicher, dass die finale Einbettung Ihren Standards fuer visuelle Klarheit und Genauigkeit entspricht, bevor Sie sie auf einer oeffentlichen Website bereitstellen.
- Eine verifizierte Immobilienadresse mit aktiver Bildabdeckung.
- Administrativer Zugriff auf Ihr Website-CMS oder Ihren HTML-Editor.
- Eine klare Liste der hervorzuhebenden Points of Interest in der Naehe.
- Ein aktives Abonnement mit Berechtigungen zur Domain-Autorisierung.
Veroeffentlichen und Autorisieren Ihrer Website-Domain
Sicherheit ist ein zentraler Aspekt beim Einbetten von interaktiven 3D-Inhalten. Um zu verhindern, dass unbefugte Dritte Ihre interaktive Karte kopieren und auf anderen Websites anzeigen, nutzt das System eine domaingebundene Sicherheit. Bevor Ihre Karte auf einer Live-Website geladen werden kann, muessen Sie die Ziel-Domain explizit in Ihrem Dashboard autorisieren. Dies stellt einen sicheren Handshake zwischen dem Rendering-Server und Ihrem Hosting-Anbieter her.
Um Ihre Domain zu autorisieren, navigieren Sie zu den Freigabe-Einstellungen Ihrer fertiggestellten Standort-Story. Geben Sie den exakten Domainnamen ein, unter dem die Karte gehostet werden soll, beispielsweise Ihre Agentur-Website oder eine spezifische Landingpage fuer Immobilien. Der vollstaendige Pfad der Seite ist nicht erforderlich, aber die Root-Domain oder Subdomain muss uebereinstimmen. Nach der Autorisierung generiert die Plattform einen geschuetzten Freigabelink und ein angepasstes Iframe-Snippet, das nur ausgefuehrt wird, wenn es auf dieser spezifischen Domain geladen wird.
Wenn Ihr Entwicklungs-Workflow eine Staging-Domain umfasst, muss auch diese Domain zur Liste der autorisierten Domains in Ihrem Dashboard hinzugefuegt werden. Andernfalls wird die interaktive 3D-Karte waehrend Ihrer internen Testphasen nicht geladen. Beachten Sie, dass lokale Vorschau-Umgebungen, die keinen standardmaessigen autorisierten Domainnamen verwenden, ebenfalls von Ladeblockaden betroffen sein koennen. Die Domain-Konfiguration ist daher der wichtigste Schritt im Bereitstellungsprozess.
Kopieren und Konfigurieren des generierten Embed-Codes
Sobald die Domain-Autorisierung abgeschlossen ist, stellt die Plattform ein standardisiertes HTML-Iframe-Code-Snippet bereit. Dieses Snippet enthaelt die sichere HTTPS-Quell-URL sowie spezifische Parameter, die das Standardverhalten der interaktiven Karte steuern. Beispielsweise enthaelt der Code Attribute, um den Vollbildmodus zu erlauben, Touch-Gesten zu aktivieren und die anfaengliche Kamerawiedergabe zu steuern.
Kopieren Sie den gesamten Codeblock genau so, wie er generiert wurde. Versuchen Sie nicht, die Parameter der Quell-URL manuell zu aendern, da dies das Sicherheitstoken beschaedigen oder wichtige Elemente der Benutzeroberfläche deaktivieren kann. Wenn Sie den Standard-Kamerapfad anpassen oder die hervorgehobenen Orte in der Naehe aktualisieren moechten, nehmen Sie diese Aenderungen im Dashboard-Editor vor und veroeffentlichen Sie die Story erneut. Der eingebettete Iframe aktualisiert sich automatisch mit den neuen Inhalten, ohne dass Sie den Code auf Ihrer Website ersetzen muessen.
Das generierte Code-Snippet enthaelt in der Regel Standardattribute wie allowfullscreen, damit Nutzer die 3D-Karte im Vollbildmodus anzeigen koennen, sowie spezifische Sandbox- oder Berechtigungsparameter, die eine sichere Ausfuehrung gewaehrleisten. Das Verstaendnis dieser Attribute hilft Webentwicklern, den Code reibungslos in benutzerdefinierte Vorlagen oder komplexe Webanwendungen zu integrieren und gleichzeitig die modernen Web-Sicherheitsstandards einzuhalten.
Erstellen eines responsiven Containers fuer alle Geraete
Immobilienkaeufer betrachten Angebote auf einer Vielzahl von Geraeten, von Breitbild-Monitoren bis hin zu kompakten Smartphone-Displays. Daher muss Ihre 3D-Karte in einem responsiven Container platziert werden, der seine Abmessungen automatisch anpasst. Eine statische Breite und Hoehe fuehrt dazu, dass die Karte auf mobilen Bildschirmen ueberlaeuft oder auf Desktop-Layouts zu klein erscheint.
Um einen responsiven Container zu erstellen, verwenden Sie ein uebergeordnetes div-Element mit einem CSS-Styling, das ein konsistentes Seitenverhaeltnis wie 16:9 oder 4:3 beibehaelt. Indem Sie die Breite des Containers auf 100 Prozent festlegen und padding-top zur Definition des Seitenverhaeltnisses nutzen, stellen Sie sicher, dass der Iframe proportional skaliert. Setzen Sie im CSS die Breite und Hoehe des Iframes auf 100 Prozent des uebergeordneten Containers mit absoluter Positionierung. Diese Technik verhindert Layout-Verschiebungen und garantiert jedem Nutzer ein nahtloses interaktives Erlebnis.
Beruecksichtigen Sie bei der Gestaltung des Seitenlayouts, wie der responsive Container mit den umliegenden Inhalten interagiert, insbesondere auf Mobilgeraeten. Wenn der Container der interaktiven 3D-Karte die gesamte Hoehe eines Smartphone-Bildschirms einnimmt, faellt es Nutzern unter Umstaenden schwer, an der Karte vorbeizuscrollen, da ihre Touch-Gesten mit die 3D-Umgebung interagieren, anstatt die Seite zu scrollen. Das Einplanen ausreichender Raender oder klarer beruehrungssicherer Zonen um den responsiven Container herum ermoeglicht eine reibungslose Seitennavigation auf Smartphones und Tablets.
Performance optimieren und Lazy Loading nutzen
Interaktive 3D-Karten benoetigen mehr Browser-Ressourcen als Standardtexte oder statische Bilder, da sie Geodaten dynamisch laden. Um schnelle Ladezeiten und eine positive Benutzererfahrung zu gewaehrleisten, sollten Sie Lazy Loading fuer den Iframe implementieren. Lazy Loading stellt sicher, dass der Browser die Assets der 3D-Karte erst dann herunterlaedt, wenn der Nutzer zu dem Bereich der Seite scrollt, in dem sich die Karte befindet.
Um Lazy Loading zu aktivieren, fuegen Sie das Attribut loading gleich lazy zu Ihrem Iframe-Code hinzu. Die meisten modernen Browser unterstuetzen dieses Attribut nativ. Fuer aeltere Browser koennen Sie leichtgewichtige JavaScript-Bibliotheken nutzen, um das Laden der Iframe-Quelle zu verzoegern. Indem Sie die Initialisierung der 3D-Karte aufschieben, bis sie benoetigt wird, schonen Sie wertvolle Bandbreite beim ersten Laden der Seite, was die Suchmaschinenoptimierung und die mobile Benutzerfreundlichkeit Ihrer Website verbessert.
Fuer Websites, die aeltere Browser unterstuetzen muessen oder erweiterte Ladekontrollen erfordern, koennen Entwickler ein JavaScript-basiertes verzoegertes Laden nutzen. Dabei wird ein Platzhalterbild oder ein leichtgewichtiger Vorschaublock im Container der Karte platziert und erst nach einer Benutzerinteraktion, wie einem Klick oder einem Scroll-Trigger, durch den tatsaechlichen interaktiven Iframe ersetzt. Dieser Ansatz garantiert, dass die anfaengliche Ladelast minimal bleibt, was schnelle Ladezeiten in Mobilfunknetzen sichert.
Einschraenkungen und Eignung
Obwohl interaktive 3D-Karten eine immersive Moeglichkeit bieten, Immobilienstandorte zu praesentieren, haben sie bestimmte technische Einschraenkungen und Eignungsgrenzen. Diese Visualisierungen basieren auf lizenzierten Geodaten und programmierten Kamerabewegungen, was bedeutet, dass sie kein direkter Ersatz fuer echte Drohnenaufnahmen der tatsaechlichen physischen Gebaeude sind. Wenn eine Immobilie neu gebaut wurde oder groessere Renovierungen stattfinden, spiegeln die zugrunde liegenden Satellitenbilder diese physischen Aenderungen moeglicherweise noch nicht wider.
Zudem sind diese interaktiven Karten fuer das Standort-Storytelling, den Nachbarschaftskontext und die Anfahrtsbeschreibung konzipiert. Sie eignen sich nicht fuer rechtliche Grenzdefinitionen, praezise Landvermessungen oder Echtzeit-Navigation. Nutzer muessen die Adressabdeckung und die Verfuegbarkeit von Bildmaterial auf der Plattform pruefen, bevor sie eine Story veroeffentlichen. Da die Einbettungen auf domaingebundener Sicherheit basieren, werden sie auf lokalen Vorschau-Umgebungen oder nicht autorisierten Staging-Servern nicht geladen. Sie muessen sicherstellen, dass die finale Produktions-Domain korrekt in Ihren Sicherheitseinstellungen eingetragen ist, damit die interaktiven Elemente funktionieren.
Die klare Kommunikation dieser Einschraenkungen an Ihre Website-Besucher hilft, Erwartungen zu steuern und die professionelle Integritaet Ihrer Marketingmaterialien zu wahren. Grundstuecksgrenzen, Dienstbarkeiten und exakte bauliche Abmessungen muessen immer durch offizielle rechtliche Dokumente und professionelle Vermessungen ueberprueft werden. Die Unterscheidung zwischen der Visualisierung und realen Drohnenaufnahmen ist wichtig, damit Kunden die Art des interaktiven Erlebnisses verstehen.
Oeffentliche Verifizierung und Tests
Nachdem Sie die 3D-Karte in Ihre Website eingebettet haben, muessen Sie einen gruendlichen Verifizierungsprozess auf der aktiven, oeffentlichen Domain durchfuehren. Verlassen Sie sich nicht ausschliesslich auf den Vorschaumodus Ihres Content-Management-Systems, da sich Sicherheitsbeschraenkungen innerhalb von Admin-Dashboards oft anders verhalten. Oeffnen Sie die Live-URL in einem Inkognito-Browserfenster, um sicherzustellen, dass keine zwischengespeicherten Administrator-Anmeldedaten den Test beeinflussen.
Testen Sie die Karte waehrend Ihrer Verifizierung sowohl auf Desktop- als auch auf Mobilgeraeten. Stellen Sie sicher, dass die programmierten Kamerabewegungen automatisch abgespielt werden, falls konfiguriert, und dass Nutzer in den Live-Erkundungsmodus wechseln koennen. Ueberpruefen Sie, ob die Touch-Steuerung auf mobilen Bildschirmen intuitiv ist, sodass Nutzer die 3D-Umgebung verschieben, zoomen und drehen koennen, ohne versehentlich am Karten-Container vorbeizuscrollen. Bestaetigen Sie schliesslich, dass alle erforderlichen Attributierungen und Copyright-Hinweise sichtbar und lesbar sind.
Bei der oeffentlichen Ueberpruefung muessen Sie auch sicherstellen, dass alle erforderlichen Attributierungen und Copyright-Hinweise im Iframe-Viewer sichtbar und lesbar sind. Gemaess den Plattform-Richtlinien und den Nutzungsbedingungen der Google Maps Platform duerfen diese Angaben nicht durch benutzerdefinierte Website-Overlays blockiert, abgeschnitten oder verdeckt werden. Wenn Ihre Website zudem ein Cookie-Einwilligungs- oder Datenschutz-Banner verwendet, pruefen Sie, ob das Ladeverhalten des Iframes die Einwilligungsentscheidungen der Nutzer respektiert und keine unbefugten Skripte ausfuehrt, bevor die Einwilligung erteilt wurde.
Fehlerbehebung bei haeufigen Integrationsproblemen
Wenn Ihre eingebettete 3D-Karte nicht korrekt geladen wird, ist die haeufigste Ursache eine fehlerhafte Domain-Zuordnung. Wenn die Browser-Konsole einen Sicherheits- oder Autorisierungsfehler anzeigt, ueberpruefen Sie noch einmal, ob die Live-Domain exakt mit der autorisierten Domain in Ihrem Dashboard uebereinstimmt. Denken Sie daran, dass Subdomains, wie www im Vergleich zur Root-Domain, in Ihren Sicherheitseinstellungen beruecksichtigt werden muessen.
Ein weiteres haeufiges Problem sind Layout-Verzerrungen, bei denen die Karte gequetscht oder abgeschnitten erscheint. Dies wird meist durch widerspruechliche CSS-Regeln in Ihrem Website-Theme verursacht. Ueberpruefen Sie den uebergeordneten Container, um sicherzustellen, dass keine festen Hoehenbeschraenkungen oder Padding-Konflikte vorliegen. Wenn die interaktiven Elemente auf Mobilgeraeten nicht auf Touch-Gesten reagieren, stellen Sie sicher, dass keine transparenten Overlay-Elemente wie Textbloecke oder schwebende Buttons den Iframe-Container blockieren.
Wenn Touch-Gesten ueberhaupt nicht reagieren, ueberpruefen Sie die CSS-Eigenschaft pointer-events des Iframes und seiner uebergeordneten Container. Manchmal ist pointer-events bei uebergeordneten Elementen auf none gesetzt oder benachbarte Elemente ueberlagern den Interaktionsbereich des Iframes. Das Wiederherstellen des Standardverhaltens von pointer-events stellt sicher, dass Nutzer auf allen Touch-Geraeten nahtlos mit der 3D-Umgebung interagieren koennen.
| Plattform | Einbettungsmethode | Empfohlenes Seitenverhaeltnis | Lazy-Loading-Unterstuetzung |
|---|---|---|---|
| WordPress | Individueller HTML-Block | 16:9 | Nativ oder Plugin |
| Webflow | Embed-Komponente | 16:9 oder 4:3 | Natives Attribut |
| Wix | HTML-Iframe-Widget | Responsiver Container | Ueber Plattform verwaltet |
| Squarespace | Code-Block | 16:9 | Natives Attribut |
| Custom HTML | Direkter Iframe-Tag | CSS-Seitenverhaeltnis | Nativ oder JS-verzoegert |
Schritt-fuer-Schritt-Prozess zur Integration der 3D-Karte
- Ueberpruefen Sie die Adressabdeckung der Immobilie und waehlen Sie Ihr Story-Template im Dashboard aus.
- Programmieren Sie die Kamerabewegungen, heben Sie wichtige Orte in der Naehe hervor und speichern Sie Ihre Aenderungen.
- Fuegen Sie Ihre Ziel-Website-Domain zur Liste der autorisierten Domains in den Sicherheitseinstellungen hinzu.
- Generieren und kopieren Sie den sicheren HTTPS-Iframe-Einbettungscode aus dem Freigabedialog.
- Fuegen Sie den kopierten Code in Ihren Website-Builder oder Ihren eigenen HTML-Container ein.
- Wenden Sie responsive CSS-Styles an, um sicherzustellen, dass der Container auf mobilen Bildschirmen korrekt skaliert.
- Verifizieren Sie die Live-Implementierung in einem Inkognito-Browserfenster auf einer oeffentlichen Domain.
Im Gegensatz zu passiven Videos oder realen Drohnenaufnahmen ermoeglichen interaktive 3D-Karten es Immobilienkaeufern, eine Nachbarschaft in ihrem eigenen Tempo zu erkunden, was sofortiges Vertrauen und raeumliches Verstaendnis schafft.
Häufige Fragen
Warum zeigt meine 3D-Karte einen Domain-Einschraenkungsfehler an?
Dieser Fehler tritt auf, wenn die Website-Domain, auf der die Einbettung gehostet wird, nicht in Ihren autorisierten Domains aufgefuehrt ist. Um dies zu beheben, melden Sie sich in Ihrem Dashboard an, navigieren Sie zu den Story-Einstellungen und fuegen Sie Ihre genaue Website-Domain zur Liste der autorisierten Domains hinzu.
Kann ich diese 3D-Karten auf mehreren Websites verwenden?
Ja, Sie koennen mehrere Domains fuer eine einzelne Standort-Story autorisieren. Auf diese Weise koennen Sie Ihre interaktive 3D-Karte auf verschiedenen autorisierten Domains anzeigen, auf denen Ihre Immobilien vermarktet werden.
Wie unterscheidet sich eine interaktive 3D-Karte von echten Drohnenaufnahmen?
Eine interaktive 3D-Karte nutzt lizenzierte Geodaten, um eine fotorealistische 3D-Umgebung zu erstellen, in der Nutzer in Echtzeit zoomen, navigieren und nahe gelegene Orte erkunden koennen. Reale Drohnenaufnahmen sind vorab aufgezeichnete, statische Videodateien, die vom Betrachter nicht interaktiv gesteuert oder erkundet werden koennen.
Wird das Einbetten einer 3D-Karte die Ladegeschwindigkeit meiner Website verlangsamen?
Standardmaessig unterstuetzt der Iframe-Code natives Lazy Loading. Dies stellt sicher, dass die Assets der 3D-Karte erst geladen werden, wenn ein Besucher zu diesem Bereich Ihrer Seite scrollt, wodurch die anfaengliche Ladegeschwindigkeit der Seite geschont wird.
Funktionieren diese 3D-Karten auf mobilen Browsern?
Ja, die interaktiven Karten sind vollstaendig fuer Touch-Gesten auf Mobilgeraeten optimiert, sodass Nutzer auf Smartphones und Tablets nahtlos in der 3D-Umgebung navigieren koennen.
Welche Anforderungen gelten fuer die Attributierung von 3D-Karten?
Alle erforderlichen Urheberrechts- und Plattform-Attributierungen sind gemaess den Nutzungsbedingungen der Google Maps Platform direkt in den Iframe-Viewer integriert. Sie muessen keine zusaetzlichen Textbeschriftungen auf Ihrer Website hinzufuegen, duerfen jedoch die integrierte Attributierung nicht blockieren oder verdecken.