Skip to main content

Show a Map

Your environment is now fully configured, and you have the necessary API keys. Next you will learn how to load a map with MapsIndoors.

Show a Map with MapsIndoors

async

Please note that data in MapsIndoors is loaded asynchronously. This results in behavior where data might not have finished loading if you call methods accessing it immediately after initializing MapsIndoors. Best practice is to set up listeners or delegates to inform of when data is ready. Please be aware of this when developing using the MapsIndoors SDK.

Latest Version

This "Getting Started" guide is created using a specific version of the SDK. When moving beyond the "Getting Started" guide, please be sure to use the latest version of the SDK.

The MapsIndoors SDK is hosted on a Content Delivery Network (CDN) and should be loaded using a script tag.

Insert the MapsIndoors SDK script tag into <head>, followed by the Google Maps script tag:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.5.1/mapsindoors-4.5.1.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=YOUR_GOOGLE_MAPS_API_KEY"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

Remember to add your API keys to the links in your code. You can use the demo MapsIndoors API key showing "The White House": d876ff0e60bb430b8fabb145.

Add an empty <div> element to <body> with the id attribute set to "map":

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.5.1/mapsindoors-4.5.1.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=YOUR_GOOGLE_MAPS_API_KEY"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px;"></div>
<script src="main.js"></script>
</body>
</html>

To load data and display it on the map, we need to create a new instance of the MapsIndoors class with a mapView instance with a few properties set. This is all done by placing the following code in the main.js file you created earlier:

// main.js

const mapViewOptions = {
element: document.getElementById('map'),
center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
zoom: 17,
maxZoom: 22,
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({
mapView: mapViewInstance
});

What happens in this snippet is we create a mapViewInstance that pulls up a GoogleMapsView with some mapViewOptions. The options define which element in the html-file to display the map in (in this case <div id="map">), where the map should center, what zoom level to display, and what the max zoom level is.

You should now see a map from your chosen provider with MapsIndoors data loaded on top.

Show a Floor Selector

Next, we'll add a Floor Selector for changing between Floors.

First, we add an empty <div> element programmatically. Then we create a new FloorSelector instance and push the floorSelectorElement to the googleMapsInstance to position it as a map controller:

// main.js

const mapViewOptions = {
element: document.getElementById('map'),
center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
zoom: 17,
maxZoom: 22,
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance });
const googleMapsInstance = mapViewInstance.getMap();

// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
googleMapsInstance.controls[google.maps.ControlPosition.RIGHT_TOP].push(floorSelectorElement);

You should now be able to switch between the first and second Floors of The White House.

If you have followed the tutorial exactly so far, you will now have something like this (due to technical limitations, only the Google Maps result is shown on this page, but Mapbox implementation will also work if you followed this guide):