2

Google has made it pretty easy to embed 360-degree panaroma shots (called "PhotoSpheres") from Android phones directly onto your own website through the plusone.js api

A very basic example is:

<html>
  <head>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  </head>
  <body>
    <g:panoembed imageurl="https://lh5.googleusercontent.com/-kr97Eucg6sM/UKGEuvo_eBI/AAAAAAAAi0s/adq8uqyhm_k/photo.jpg" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="600,400"/>
    <script>
      gapi.panoembed.go();
    </script>
  </body>
</html>

However, this ONLY seems to work if the image passed in imageurl is hosted in Google+. Is there a way to use these images without first giving the image to Google? I take the panorama on my Android phone and can view the 360-degree magic on my device with no problem. I copy the image off my device and upload it to my web server, however if I link to my own copy of the image, the "magic Google stuff" does not happen. If I then upload the image to Google+ and then view it and get the URL and paste that in...then it works perfectly. I would sure like to skip the Google+ step and just use my images without giving them to Google.

Any idea how to get this working on images that are not Google hosted?

techtheatre
  • 5,678
  • 7
  • 31
  • 51

2 Answers2

2

This project on github might be what you are looking for: Photosphere - Github

Jeshurun
  • 22,940
  • 6
  • 79
  • 92
1

If you use AngularJs, I developed a small directive right here : https://github.com/Gullfaxi171/angular-photosphere-directive

you'll just have to type :

<photosphere src="path/img.jpg"></photosphere>

in your HTML

Gullfaxi171
  • 213
  • 2
  • 15