Tobias Scheible Cyber Security & IT-Forensik Dozent
einzelne Seiten hervorheben

Photo Sphere in Website einbinden

Ich habe hier in meinem Blog schon einmal über die Möglichkeit geschrieben, 360°-Aufnahmen mit JavaScript in eine Website einzubinden. Damals basierte das Ganze noch auf dem Web-Viever von Joe Simpson. Mittlerweile hat Google eine eigene Methode veröffentlicht.

Donnerstag, 13. Juni 2013
7 Kommentare
Web Development
Android, 360, Panorama, Photo Sphere

Dazu hat Google einen eigenen Viewer veröffentlicht. Die Einbindung ist eigentlich ganz einfach. Als erstes muss die Google+ JavaScript-API eingebunden werden und dann das proprietäre g:panoembed Element.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:panoembed imageurl="foto.jpg" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="600,400"/>

Und so sieht das Ganze in live aus:

Hier geht es zu meiner „alten“-Version und weitere Informationen gibt es auf der Google Developers Seite.

Und so sieht die komplette Foto-Datei im Rohformat aus:

360°-Aufnahmen der Burg Hohenzollern
360° Photo-Sphere Aufnahme der Burg Hohenzollern
360°-Aufnahmen der Burg Hohenzollern 360° Photo-Sphere Aufnahme der Burg Hohenzollern

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Marc am 13. Juni 2013 um 20:04 Uhr

Vielen Dank, wirklich ein klasse Tipp um die Homepage etwas aufzupäppeln, sieht man ja noch nicht so oft…

Nina am 15. Juni 2013 um 08:24 Uhr

Das sieht ja super aus.

Gefällt mir.

Lisa am 15. Juni 2013 um 16:02 Uhr

Geile Technik von Google. Umsetzung sieht auch sehr gut aus, wie ich finde, auf jeden Fall leicht bedienbar und keine Aussetzer.

Da hab ich schon deutlich schlechtere Varianten gesehen!

Björn am 11. Januar 2014 um 10:10 Uhr

Wow. Ist die 360° Funktion auch auf Photoshop verfügbar oder kann man diese nur bei der Aufnahme mit beispielsweise eines iPhones erstellen?

Tobias Scheible am 17. Januar 2014 um 20:45 Uhr

Photoshop kann so etwas natürlich auch: Adobe Hilfe

Peter Winninger am 16. Juni 2014 um 12:53 Uhr

Muss (leider) ohne PlugIn auskommen, da es bei WordPress gehostet ist. Aber auch der „Umweg“ über den Link bei Google Maps Views und Einbindung des iframe-Codes funktioniert prima. Und wertet obendrein den Blogartikel noch ein bisschen auf. 🙂

Kateryna am 12. Mai 2015 um 19:48 Uhr

Interessant….gefällt mir!

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.