Google-Tour auf der Website einbinden – Schritt für Schritt (DSGVO-konform)

Eine Google-Tour auf der Website einbinden – das klingt nach einer Aufgabe für Programmierer, ist aber mit etwas Anleitung gut zu bewältigen. Ihr Rundgang ist dann nicht nur in Google Maps zu sehen, sondern auch genau dort, wo Interessenten sich bereits intensiv mit Ihrem Angebot beschäftigen: auf Ihrer eigenen Website.

Dabei gibt es zwei Seiten zu beachten. Die technische: Wie kommen Sie an den Einbettungscode, und wie sieht die Tour auf dem Smartphone gut aus? Und die rechtliche: Sobald Inhalte von Google geladen werden, werden Daten übertragen – das hat Folgen für den Datenschutz. Wir gehen beides Schritt für Schritt durch.

Warum Sie Ihre Google-Tour auf der Website zeigen sollten

Wer Ihre Website besucht, sucht meist konkrete Informationen: Speisekarte, Zimmerpreise, Leistungen, Anfahrt. Ein eingebetteter Rundgang ergänzt diese Informationen um den räumlichen Eindruck. Besucher müssen nicht zu Google Maps wechseln, sondern erleben Ihre Räume direkt neben dem Buchungs- oder Kontaktformular.

• Mehr Verweildauer: Ein Rundgang lädt zum Erkunden ein.
• Weniger Rückfragen: Größe, Ausstattung und Wege sind auf einen Blick klar.
• Doppelter Nutzen: Einmal erstellte Aufnahmen arbeiten in Google und auf Ihrer Website.

Falls Sie noch keinen Rundgang haben: Was eine Google-Tour ist und wie sie entsteht, lesen Sie im Beitrag Was ist eine Google Street View Tour?.

Schritt 1: Den Einbettungscode in Google Maps abrufen

Den Code für Ihre Website erhalten Sie direkt in Google Maps. Die Bezeichnungen können sich mit neuen Versionen leicht ändern; im Kern funktioniert es so:

1. Öffnen Sie Google Maps im Browser am Computer (in der Smartphone-App steht die Einbettungsfunktion in der Regel nicht zur Verfügung).
2. Suchen Sie Ihr Unternehmen und öffnen Sie die Innenansicht, sodass Sie sich im gewünschten Panorama befinden.
3. Richten Sie die Ansicht so aus, wie Besucher sie zuerst sehen sollen – etwa mit Blick in den Gastraum statt auf die Garderobe.
4. Öffnen Sie das Menü und wählen Sie Teilen bzw. „Bild teilen oder einbetten“.
5. Wechseln Sie in den Reiter Karte einbetten, wählen Sie eine Größe und kopieren Sie den angezeigten HTML-Code.

Der kopierte Code ist ein sogenanntes iframe – ein Fenster, in dem eine fremde Seite innerhalb Ihrer Website angezeigt wird.

Schritt 2: Den iframe verstehen und einfügen

Vereinfacht sieht der Code etwa so aus:

<iframe src="https://www.google.com/maps/embed?pb=…"
  width="600" height="450" style="border:0;"
  allowfullscreen loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

Die wichtigsten Bestandteile:

• src: die Adresse Ihrer Innenansicht inklusive Blickrichtung. Diesen Teil nicht verändern.
• width und height: feste Breite und Höhe in Pixeln – für mobile Geräte meist ungünstig (siehe Schritt 3).
• allowfullscreen: erlaubt die Vollbildansicht, die bei Rundgängen sehr sinnvoll ist.
• loading="lazy": lädt den Inhalt erst, wenn er in den sichtbaren Bereich gescrollt wird.

In gängigen Baukastensystemen und Content-Management-Systemen fügen Sie den Code über einen HTML- oder „Code“-Block ein. Ergänzen Sie außerdem ein aussagekräftiges title-Attribut, etwa „Virtueller Rundgang durch unser Restaurant“ – das hilft bei der Orientierung und ist guter Stil.

Schritt 3: Die Tour responsiv darstellen

Ein fest eingestellter iframe mit 600 Pixel Breite ragt auf dem Smartphone über den Bildschirm hinaus oder wird unschön abgeschnitten. Besser ist eine Darstellung, die sich der verfügbaren Breite anpasst und dabei ein festes Seitenverhältnis behält.

Das Prinzip: Der iframe erhält eine Breite von 100 Prozent, die Höhe ergibt sich aus einem Seitenverhältnis, etwa 16:9 für breite Layouts oder 4:3 für etwas mehr Höhe auf dem Smartphone. Moderne Browser unterstützen dafür die CSS-Eigenschaft aspect-ratio. Viele Website-Baukästen bieten eine entsprechende Einstellung direkt im Einbettungsblock an.

Testen Sie das Ergebnis unbedingt auf einem echten Smartphone: Lässt sich der Rundgang wischen, ohne dass versehentlich die ganze Seite scrollt? Ist die Vollbild-Schaltfläche erreichbar?

Schritt 4: Datenschutz – warum eine Einwilligung nötig ist

Hier liegt der Punkt, den viele Websites übersehen. Wird ein Google-Maps-iframe direkt beim Seitenaufruf geladen, baut der Browser eine Verbindung zu Google-Servern auf. Dabei werden unter anderem die IP-Adresse und technische Informationen übertragen, und es können Informationen auf dem Endgerät gespeichert oder ausgelesen werden.

Für den deutschen Markt bedeutet das nach herrschender Auffassung: Für den Zugriff auf das Endgerät ist grundsätzlich eine Einwilligung nach § 25 TDDDG erforderlich, sofern keine Ausnahme greift. Für die anschließende Verarbeitung personenbezogener Daten braucht es eine Rechtsgrundlage nach Art. 6 DSGVO – bei eingebetteten Google-Diensten ist das in der Praxis in der Regel ebenfalls die Einwilligung. Zudem sollte der Dienst in Ihrer Datenschutzerklärung beschrieben sein. Wie wir das auf unserer eigenen Website handhaben, sehen Sie in unserer Datenschutzerklärung.

Wichtiger Hinweis: Dieser Abschnitt ist eine allgemeine Information und keine Rechtsberatung. Lassen Sie die Umsetzung auf Ihrer Website im Zweifel von einer fachkundigen Stelle prüfen.

Schritt 5: Zwei-Klick-Lösung oder Consent-Tool einrichten

Damit die Tour erst nach Zustimmung geladen wird, gibt es zwei verbreitete Wege.

Die Zwei-Klick-Lösung

Statt des Rundgangs erscheint zunächst ein Vorschaubild oder Platzhalter mit einem kurzen Hinweis: Beim Laden werden Daten an Google übertragen. Erst ein Klick auf „Tour laden“ bindet den iframe ein. Optional kann die Entscheidung für künftige Besuche gespeichert werden. So sieht das in der Praxis aus – der folgende Rundgang wird erst nach Ihrem Klick geladen:

Das Consent-Tool

Nutzen Sie ohnehin ein Cookie- bzw. Einwilligungsbanner, lässt sich Google Maps dort als eigene Kategorie oder eigener Dienst hinterlegen. Die Tour wird dann nur geladen, wenn Besucher zugestimmt haben; andernfalls zeigt das Tool einen Platzhalter mit der Möglichkeit, die Zustimmung nachträglich zu erteilen.

Beide Varianten sind gängig. Die Zwei-Klick-Lösung ist schlank und transparent, das Consent-Tool bündelt alle Einwilligungen an einer Stelle. Wichtig ist bei beiden: Vor der Zustimmung darf keine Verbindung zu Google entstehen.

Checkliste für die Einbindung

• Startansicht bewusst gewählt und Code über „Teilen → Karte einbetten“ kopiert
• title-Attribut ergänzt
• Responsive Darstellung auf Smartphone und Tablet getestet
• Laden erst nach Einwilligung (Zwei-Klick-Lösung oder Consent-Tool)
• Google Maps in der Datenschutzerklärung beschrieben
• Rundgang an einer sinnvollen Stelle platziert, etwa neben Reservierung oder Kontakt

Fazit: Einmal eingebunden, dauerhaft im Einsatz

Mit wenigen Schritten wird Ihre Google-Tour Teil Ihrer Website – technisch sauber, mobil gut bedienbar und datenschutzfreundlich. Wenn Sie Ihre Tour bei uns erstellen lassen, erhalten Sie den Einbettungscode direkt mit; wir empfehlen dabei stets die Zwei-Klick-Lösung. Mehr über den Leistungsumfang erfahren Sie auf der Seite Google Street View Tour. Wünschen Sie sich einen Rundgang mit eigenem Design, der ohne Google-Oberfläche auskommt, ist die individuelle 360-Grad-Tour eine Alternative. Welche Variante zu Ihnen passt, klären wir gern in einem persönlichen Beratungsgespräch.