- Products ProductsLocation Services
Solve complex location problems from geofencing to custom routing
PlatformCloud environments for location-centric solution development, data exchange and visualization
Tracking & PositioningFast and accurate tracking and positioning of people and devices, indoors or outdoors
APIs & SDKsEasy to use, scaleable and flexible tools to get going quickly
- Documentation
- Pricing
- Resources ResourcesTutorials TutorialsExamples ExamplesBlog & Release Announcements Blog & Release AnnouncementsChangelog ChangelogDeveloper Newsletter Developer NewsletterKnowledge Base Knowledge BaseFeature List Feature ListSupport Plans Support PlansSystem Status System StatusLocation Services Coverage Information Location Services Coverage InformationSample Map Data for Students Sample Map Data for Students
- Maps
- Data display
- Styles and Layers
- Markers
- Geoshapes
- Resizable Geoshapes
- Clustering
- Events
- Info Bubbles
- Services - Routing, Geocoding
- Map with Driving Route from A to B
- Map with Pedestrian Route from A to B
- Truck routing road restrictions
- Map with Route from A to B using Public Transport
- Map with isoline route
- Search for a Location based on an Address
- Search for a Location given a Structured Address
- Search for the Address of a Known Location
- Search for a Landmark
- Integration of Fleet Telematics Services
- Integration with the HERE Style Editor
- Indoor Map
- 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>Indoor Map UI Interactions</h1>
<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>Mall of Berlin (22766)</b>.
This example also works with Tiefgarage Riem Arcaden APCOA parking garage (27158) and Zurich Airport (7348)
</p>
<div id="map"></div>
<h3>Code</h3>
<p>
The example shows UI interactions with the Indoor Map.<br>
The example covers the below mentioned samples:
<ul>
<li>the usage of the indoor map related UI controls to change levels and buildings using <code>H.venues.ui.LevelControl</code> and <code>H.venues.ui.DrawingControl</code> respectively.</li>
<li>displaying an info-bubble on click of a geometry</li>
<li>searching geometries in an indoor map and highlighting them</li>
</ul>
</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
