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=”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…