• JavaScript
  • HTML
                  
                  

                  
                
                  
                  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="description" content="Use the HERE Indoor Maps API to calculate an indoor-outdoor route">
    <title>Display an indoor route</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"></script>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
  <script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
  <body>
    <h1>Show a route on an Indoor Map</h1>
    <p>
		The Indoor Maps module facilitates access to your private indoor maps including full JSON models as well as routing between indoor and outdoor points. The HERE Indoor Maps API also provides information about indoor spaces, buildings, level geometry and points of interest.
    </p>

    <p>
      More information on the use of the HERE Indoor Maps API is available <a href="https://developer.here.com/documentation/maps/dev_guide/topics/venues.html" target="_blank">here</a>.
    </p>

    <p>
      This example shows an Indoor Map of the <b>Zurich Airport</b> as well as a route between indoor and outdoor points. 
    </p>

    <div id="map">
      <!-- Map -->
    </div>

    <h3>Code</h3>
    <p>
      The example shows loading an Indoor Map, route calculation using <code>H.venues.Service</code> and then visualizing the calculated route on the map using <code>H.venues.Provider</code>.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>