Usage

Embed an iGUIDE with an <iframe> tag. Learn more about embedding.

In this example, we will embed two iGUIDEs to demonstrate how the iGUIDE Viewer API can be used for a virtual showing of a property that is implemented using a master-slave model.

Embed an unbranded iGUIDE and add the ?api=1&autostart=1&noinitanimation=1 URL parameters to include the API functionality, automatically start the iGUIDE when the page loads and skip the initial animation for a better user experience.

<iframe id="iguide_master" width="840" height="480" src="https://unbranded.youriguide.com/1803_demo_road?api=1&autostart=1&noinitanimation=1" frameborder="0" allowfullscreen></iframe>
<iframe id="iguide_slave" width="840" height="480" src="https://unbranded.youriguide.com/1803_demo_road?api=1&autostart=1&noinitanimation=1" frameborder="0" allowfullscreen></iframe>

In the JavaScript code for your web application, connect the API to the iGUIDEs. You should wait for the ready() promise to resolve for both iGUIDEs before listening for events.

WARNING

If you need to support older browsers that lack support for the Promise API you must include your own polyfill for window.Promise, for example ES6-Promise

const master = new IGuideViewer(document.getElementById('iguide_master'));
const slave = new IGuideViewer(document.getElementById('iguide_slave'));

await Promise.all([master.ready(), slave.ready()]);

master.addEventListener('tour:move-start', (position, camera, transition) => {
  slave.tour.move(position, camera, transition);
});

master.addEventListener('tour:camera-move', camera => {
  slave.tour.moveCamera(camera);
});

In this example, as a user explores the master iGUIDE, the slave will follow. See full demo.

For a full list of methods and events, see API Reference.