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.

 

https://developers.google.com/maps/documentation/embed/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=”https://www.google.com/maps/embed/v1/streetview?location=44.2773%2C-88.2966&key=AIzaSyD-Ys2H-r47eAXl6sOQSnFnMJpUJ6kzKVg” 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.