Einbinden der 360-Grad-Tour auf eurer Webseite
Mit wenigen Schritten könnt ihr die virtuelle 360-Grad-Tour ganz einfach auf eurer eigenen Webseite einbinden. Nachfolgend findet ihr ein Beispiel für die Einbettung sowie den entsprechenden Code, den ihr direkt übernehmen oder bei Bedarf anpassen könnt.
Zusätzlich findet ihr Hinweise zu den wichtigsten Einstellungsmöglichkeiten – etwa zur Grösse der Ansicht, zur Vollbildanzeige oder zur Startausrichtung der Tour. Falls ihr besondere Anforderungen habt oder Unterstützung bei der Anpassung braucht, könnt ihr euch gerne bei mir melden – ich helfe euch unkompliziert weiter.
Tour von Google MAPS/Streetview einbinden
Code zum einbetten:
<iframe src="https://www.google.com/maps/embed?pb=!4v1748771076604!6m8!1m7!1sCAoSHENJQUJJaEEzZTN1aWtybDFEYjZHekxHaUUwSFI.!2m2!1d47.22620322352576!2d8.82184837394727!3f40.62374905437209!4f-8.207445917153393!5f0.7820865974627469" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Im Einbettungscode können bestimmte Werte ganz einfach angepasst werden:
Grösse der Bildansicht:
Die Breite (width) und Höhe (height) können individuell in Pixeln angepasst werden, zum Beispiel:
width=“500” height=“400”
Alternativ kann auch statt Pixeln ein Prozentwert verwendet werden, um die Ansicht flexibel an verschiedene Bildschirmgrössen anzupassen – zum Beispiel:
width=“100%” height=“500”
Vollbildanzeige:
Standardmässig enthält der Code den Eintrag allowfullscreen="".
Wenn dieser Eintrag komplett entfernt wird, verschwindet oben rechts im Bild der Button für die Vollbildansicht.
Startansicht / Blickrichtung:
Die Blickrichtung, Kameraposition und Zoomstufe beim Laden der Tour können ebenfalls angepasst werden.
Falls Du ein bestimmtes Startbild oder eine andere Ausrichtung wünschst, kannst Du Dich gerne bei mir melden – ich passe den Code individuell für Dich an.
Alternativ kannst du direkt in Google Maps das gewünschte Bild auswählen und die Ansicht auf die passende Ausrichtung ziehen. Klicke anschliessend auf „Teilen“ und wähle dann die Registerkarte „Karte einbetten“ aus. Dort erhältst du deinen individuellen Code, um die Tour direkt auf deiner Webseite einzubinden.
Tour vom Provider Kuula einbinden (ohne Startinformationen)
Code zum einbetten:
<iframe width="500" height="500" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/collection/71JhT?logo=-1&info=1&fs=1&vr=0&zoom=1&gyro=0&autopalt=1&thumbs=3&margin=10&alpha=0.91&inst=de"></iframe>
Im Einbettungscode können bestimmte Werte ganz einfach angepasst werden:
Grösse des Bildausschnitts:
Die Breite (width) und Höhe (height) können individuell in Pixeln angepasst werden, zum Beispiel:
width=“500” height=“400”
Alternativ kann man auch Prozentwerte verwenden, um die Ansicht flexibel an die Bildschirmgrösse anzupassen – zum Beispiel:
width=“100%” height=“500”
Weitere Einstellungsmöglichkeiten bei Kuula:
Der iFrame-Code kann zusätzlich mit verschiedenen Funktionen erweitert werden, wie zum Beispiel:
-
Automatische Rotation
-
Geführte Begehung der Tour
-
Thumbnails (Vorschaubilder)
-
Zoom- und Kamerasteuerung
-
Startposition und Blickrichtung
-
Licht- und Schatten-Effekte
Diese Funktionen sind im nicht alle im oberen Code enthalten, können aber individuell ergänzt werden.
Gerne passe ich den Code für Deine Webseite an – einfach kurz Bescheid geben.
Tour vom Provider Kuula einbinden (mit Startinformationen)
Code zum einbetten:
<iframe width="500" height="500" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/collection/71JhT?logo=-1&info=1&fs=1&vr=0&zoom=1&gyro=0&initload=0&autopalt=1&thumbs=3&margin=10&alpha=0.91&inst=de"></iframe>
Im Einbettungscode können bestimmte Werte ganz einfach angepasst werden:
Grösse des Bildausschnitts:
Die Breite (width) und Höhe (height) können individuell in Pixeln angepasst werden, zum Beispiel:
width=“500” height=“400”
Alternativ kann man auch Prozentwerte verwenden, um die Ansicht flexibel an die Bildschirmgrösse anzupassen – zum Beispiel:
width=“100%” height=“500”
Weitere Einstellungsmöglichkeiten bei Kuula:
Der iFrame-Code kann zusätzlich mit verschiedenen Funktionen erweitert werden, wie zum Beispiel:
-
Automatische Rotation
-
Geführte Begehung der Tour
-
Thumbnails (Vorschaubilder)
-
Zoom- und Kamerasteuerung
-
Startposition und Blickrichtung
-
Licht- und Schatten-Effekte
Diese Funktionen sind im nicht alle im oberen Code enthalten, können aber individuell ergänzt werden.
Gerne passe ich den Code für Deine Webseite an – einfach kurz Bescheid geben.