[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+.


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

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

<g:panoembed imageurl=""

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.


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.

Nirmal is a Technology Blogger and a Microsoft MVP in Windows. Blogging has been his passion for more than a decade now, he started with this blog in 2007. He can be contacted at You can find Nirmal on , and .

You may also like

Leave a reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More in:Google