(Old) Embed your Photospheres in your blog/webpage

Update 22/11/15: The world of Google Maps is a rapidly changing one but this time it's some good news as we now have a method by which we can embed photospheres, published after the shuttering of Map Views, on any web page. Check out the tutorial.

Update 21/08/15: I've done some searching and I've found a method to locate and create embed code for constellations that were published before Map Views was closed down. You can find the step by step tutorial at http://tonyredhead.com/google-tips/embed-constellations

Update 20/08/15: Google have shuttered Map Views and incorporated all photospheres into a "Contributions" sidebar in Google Maps. At this time there is no embed option provided for photospheres but I will update the blog when one becomes available. For now you can follow the Google Blog Post at https://plus.google.com/+GoogleMaps/posts/HJbE9zbEeh2

Google+ have just launched a new feature in Views that lets you quickly get HTML code to embed photo spheres on your own website (if you've shared them on Views).   

Update 25/08: When viewed on Chrome/Safari on iOS and Chrome Google Nexus7 the panoramas appear as wide panning images not 360 views. This was a similar case with Views until Google updated the Viewer. I understand the embedded viewer will also be updated, hopefully sometime soon.

1. Sign in to Google+ if you aren't already signed in. Open Google Map Views 

Google Map Views home

2. If you aren't on your own Google Map Views page click on your name in the top right menu bar to open it. Scroll through your Photospheres to find the one you want to embed.

3. Click on the Photosphere you want to embed to open it into the main view.

Photosphere open and "Share this image" popup open

4. Click on the "Share" button and copy the code from the Embed section. You can change the size of the iFrame by clicking on the "Change Dimension" link. 

"Share this image" popup window with Link and Embed code

5. This is the code that you get when you copy it from the "Share this image" screen. 

<iframe width="640" height="360" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?layer=c&amp;panoid=a4zWp_ETsrwAAAQIt-EKEg&amp;ie=UTF8&amp;source=embed&amp;output=svembed&amp;cbp=13%2C0%2C%2C0%2C0"></iframe><div><small><a href="https://www.google.com/maps/views/" style="color:#0000FF; text-align:left">Views</a>: <a href="https://www.google.com/maps/views/view/106075695432042776001/gphoto/5910687389806149202" style="color:#0000FF; text-align:left">Morgan&#39;s Lookout - NSW</a> by <a href="https://www.google.com/maps/views/profile/106075695432042776001" style="color:#0000FF; text-align:left">Tony Redhead</a></small></div>

6. Add the code to your web page and the Photosphere as shown above will be displayed within the page.

Note: My blog is published using Squarespace and I want the Photosphere to fill the width defined in my page settings. To do this I've changed the width & height to width="100%" height="480"