Recently I wrote about Insta 360 Nano with Marzipano – a great combination. In this article I’ll talk about HOW this was achieved. I used the Insta360 Nano camera for my still images. This is a great little piece of kit and I’ve been using it for the past few months. The Insta360 also comes with free software so that you can do some simple editing and exporting of the still and video files. All of the software and hardware details can be found at http://www.insta360.com/.
You will also need to access the Marzzipano site at http://www.marzipano.net/ and click on the Marzipano Tool. This is where we will build and export our 360 tour.
First thing I had to do was convert the insp image files from the camera to standard JPGs as Marzipano does not support the file type. I used the software provided by Insta360 called Insta360Studio. Simply add your images to the list and export on the right.
With the images now as JPGs, they’ll look a bit odd. This is ok as Marzipano will recognise them.
Navigate to http://www.marzipano.net/ and click on the top right button titled Marzipano Tool (or go straight to http://www.marzipano.net/tool/index.html). This is a web based tool that will easily help you create your 360 tours.
When it first opens, simply drag and drop your files into the open window
Your files will automatically upload and be presented to you in the order uploaded.
To add a Hotspot, simply select the image you want to use and click on Info Hotspot at the bottom. Enter in the details. You can click and change the location of the hotspot by dragging.
You can change the names of the images on the left by clicking on the pencil if the selected image. The names you add here are used when linking to a hotspot as you can see below.
Once you’ve made all the changes you want to make, click on the EXPORT button in the top right. Note that you can’t save a project. If you close your browser you need to start again! Exporting will create the HTML / JS and CSS files you need.
I then upload the files as they are to my server where I can then link to them in an iFrame (or direct). These will work on a local machine, but I discovered you need a local web server like AMPPS to run them. You need to run the files from the app_files folder, these are also the ones you upload.
The project does come with some built in webservers for macOS and Windows, but being a developer I use my local MAMP instance.
Below is the final project embedded using H5p iFrame Embedder or you can link directly here
Hi, really good tutorial but I’ve try to make like you : upload the marzipano export to my website but I haven’t understand the steps to share your marzipano tour into your website, did you have a tutorial? Thanks.
When you export, you get a ZIP file. You need to unzip and upload to a folder on your website. You should be able to access it from there. Here is another example: http://shoalhavenmarine.com.au/wp-content/360/
Thanks a lot, Sir
Hey there, I have tried uploading my Marzipano virtual tour multiple times and I only end up getting a bunch of text as follows:
‘use strict’;
(function() {
var Marzipano = window.Marzipano;
var bowser = window.bowser;
var screenfull = window.screenfull;
var APP_DATA = window.APP_DATA;
// Grab elements from DOM.
var panoElement = document.querySelector(‘#pano’);
var sceneNameElement = document.querySelector(‘#titleBar .sceneName’);
var sceneListElement = document.querySelector(‘#sceneList’);
And on and on that goes. What am I doing wrong?
Any help would be appreciated.
Best regards
Hi Egan – can you provide a link to your site please
Hi, thank you for this tutorial. Is it possible to upload the tour then to Google maps Streetview?
Checkout Movense 360 product photography platform. It’s one of the fastest and easiest solutions in the market to capture 360 product spins within seconds. For more details:- https://www.movense.com/publisher/
Hi, also having the same problem with trying to get the panorama on my website (no coding skills). Have created panorama in Marzipano, great tool, can open it directly with an old internet explorer browser. Using google sites for webpage, dont seem to be able to upload files directly so uploaded to google docs with hyperlink but just get a page with text when trying to open the html file. Been trying to solve this for a few days now, any help would be really grateful
Hi Mike – this could be that you Google Docs don’t render as webpage (ie reading the HTML, just sees it as text). I’ve not tried it, but will it work with Google drive?