In this post we will show you how you can use iframe code to embed Google Maps with directions and website in your tour Hotspots.
Log into your dashboard and open an existing tour in which you wish to add Google Maps Directions.
Here we will be using an existing tour to show you how can you embed direction maps in your hotspots.
Select the Hotspot and use a blank template
Go to https://developers.google.com/maps/documentation/embed/start
Add origin and destination locations you want direction for and click on looks good. It will ask for API key,Complete the registration process and you will get your key.Paste the API key in the required field and you will get an iframe code.
Copy the iframe code and paste it in the source window of the Hotspot.
You can Adjust height,width of the iframe from source if required.
Position the hotspot at the best suitable location and your hotspot is saved. You can change the background color, opacity, make it embossed or flat etc. to make it look more attractive.
Preview for mobile devices
On Google chrome there is a nifty tool to preview the tour on mobile. It is in the developer tools. You activate it either from the browser menu ,
More Tools >> Developer Tools or by pressing key 'F12' on machines with that key!
Activating the mobile preview will give you options to switch between different devices and see how the tour is going to look. To switch you can use the drop downs from top of the preview. You will need to hit REFRESH [F5] to reload the screen.
Similarly you can also embed a website in a particular hotspot using the following code
<iframe height="640px" src="http://www.madametussauds.com/london/" style="border:none;" width="100%"></iframe>
Preview for mobile devices
