Maps API for JavaScript
Fork on GitHub Edit in JSFiddle
  • 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 load and visualize an indoor map">
    <title>Display an Indoor Map</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>
    <style type="text/css">
      .log {
        position: absolute;
        top: 5px;
        left: 5px;
        height: 150px;
        width: 250px;
        overflow: scroll;
        background: white;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
      }
      .log-entry {
        padding: 5px;
        border-bottom: 1px solid #d0d9e9;
      }
      .log-entry:nth-child(odd) {
          background-color: #e1e7f1;
      }
    </style>
  <script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
  <body>
    <h1>Show an Indoor Map</h1>
    <p>
		The Indoor Maps module facilitates access to your private indoor maps including full JSON models. 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://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/indoor-maps.html" target="_blank">here</a>.
    </p>

    <p>
      This example shows an Indoor Map of the <b>Zurich Airport (7348)</b>.
      This example also works with Tiefgarage Riem Arcaden APCOA parking garage (27158) and Mall of Berlin (22766)
    </p>

    <div id="map"></div>
    <h3>Code</h3>
    <p>
      The example shows loading the Indoor Map using <code>H.venues.Service2</code> and renders the indoor map using an instance of <code>H.venues.Provider</code>.<br>
	    The example also shows how to:
      <ul>
        <li>get the list of indoor maps from the given HRN using <code>H.venues.Service2.getMapInfoList()</code></li>
        <li>disable the base map while loading a indoor map using <code>H.Map.setBaseLayer(layer)</code></li>
        <li>switch to an indoor map level other than the default using <code>H.venues.Venue.setActiveLevelIndex(levelIndex)</code></li>
        <li>override default indoor map label text preferences using <code>H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE</code></li>
      </ul>
    </p>
    <p>
      For complete descriptions of the parameters shown in this example, see the <a href=https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.venues.html target="_blank">API Reference</a>.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>

Developer

Products
Community
Company
Privacy Settings Privacy Policy Cookie Policy Service Terms

© 2024 HERE