Embed your Photospheres in your blog/webpage

Update 21/1/2016: Jim Popenoe just posted that Google have made some progress updating Google Maps and it's now possible to embed Photospheres without requiring Javascript or an API key. Below is an example of a Photosphere I posted late last year and embedded using Jim's embed tool for Photospheres.

The embed tool is very easy to use and the code can be generated in five simple steps.

  1. Open the embed tool by browsing to the URL http://suddenlink.net/popenoe/tools/embedding-tool.htm
  2. Move and zoom the map to the location where your photosphere has been placed
  3. Drag the "Pegman" onto the blue dot to generate the code
  4. Move your photosphere to the view you want as the initial view
  5. Copy the code

Step 1 & 2: Open the URL and move the map to the location of your photosphere

Step 3: Drag Pegman onto your photosphere

Step 4: Set your initial view

The following is the code from the example above. 

<iframe frameborder="0" width="640" height="360" style="border: 0" src="https://maps.google.com/maps?layer=c&panoid=F:-MAaQvLIigqk/VkasJQCjuVI/AAAAAAAAEbc/JR1fXHGIYek&ie=UTF8&source=embed
&output=svembed&cbp=13%2C189%2C%2C0.020000000000000018%2C11.9" allowfullscreen=true></iframe>

In my case as I'm embedding the code into a responsive page I want the embedded image to fill the page so I'll change the width to "100%" and the height to "480" to fit smartphones.

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia