Home / Google / [How To] Embed Google Photo Sphere in any Website

[How To] Embed Google Photo Sphere in any Website

Photo Sphere is a feature which was announced by Google with the release of Android Jelly Bean. With Photo Sphere, you can snap pictures in every direction that come together into incredible, immersive photo spheres that put you right inside the scene. Initially you could view your photo spheres right on your phone or share them on Google+ with your friends and family, or even add them to Google Maps for the world to see.

But today Google has announced that you can now embed these images to any website. This means you can view photo sphere images without having to use Google+.

Photosphere

How to Embed them into any web page:

The instructions to embed the Photo Spheres to web pages is pretty simple. You need to add the following Javascript to your web page.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

To add the photo sphere viewer to your website, use the g:panoembed element. The following is an example:

<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"/>

The Google+ Platform API will convert all the g:panoembed elements on the page into the interactive photo sphere viewer when this JavaScript function is executed. You just need to change the image URL although there are other parameters available.

Example

This simple example will show the photo sphere viewer in action. You can view the page’s source code to see how it was created. Once the image is loaded, you can use the mouse to get the complete view.

More details on this available here. This is really a nice move by Google to promote Photo Sphere and also useful web owners to display images in better way.

About Nirmal

Nirmal is a Technology Blogger and a Microsoft MVP in Windows. He can be contacted at nirmal@nirmaltv.com. You can find Nirmal on , and .

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>