How to put a 360° photo into a webpage

I thought it would be awesome if we allowed our visitors to immerse themselves into our adventures.


Here is how to embed a google photosphere into a webpage. You’re going to get the HTML code for an iFrame reference and add it with a simple Beaver Builder HTML object.

Prepare: you will need a google account to setup the API key – Don Krause has one that is already setup for Troop51 so check in with him to get a jump start.

NOTE: I was unable to get the Custom panorama ID: to work but believe this would ensure you get the correct photosphere. For now I just searched based on the name of the property and got lucky with my photo being the first to show 🙂





Here is the HTML for Heesakker Park:

<iframe width=”100%” height=”550″ frameborder=”0″ style=”border:0″ src=”” allowfullscreen>

To get the map to span full screen you need to set the advanced settings for BOTH the html box AND the row box…


Leave a Comment

You must be logged in to post a comment.