Show a map

Last updated:

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

After going through this tutorial this is what you end up with:

Show a map with MapsIndoors

The MapsIndoors SDK is hosted on a 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 -->

<head>
...
<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>

Remember to add your API keys. 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 -->

<body>
<div id="map" style="width: 600px; height: 600px;"></div>
...
</body>

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:

// 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.

Using the <mi-map-googlemaps> component, the MapsIndoors JS SDK is automatically inserted into the DOM when initialized.

The MapsIndoors Web Components library can be loaded using unpkg, a widely used CDN for everything on npm.

Insert script tag into <head>:

Check @mapsindoors/components for latest version.

<!-- index.html -->

<head>
...
<script src="https://unpkg.com/@mapsindoors/components@8.2.0/dist/mi-components/mi-components.js"></script>
</head>

After you added the script tag into <head>, add the <mi-map-googlemaps> custom element into <body>. We need to add and populate the gm-api-key and mi-api-key attributes with your API keys as well:

<!-- index.html -->

<body>
<mi-map-googlemaps
style="width: 600px; height: 600px;"
gm-api-key="YOUR_GOOGLE_MAPS_API_KEY"
mi-api-key="YOUR_MAPSINDOORS_API_KEY">

</mi-map-googlemaps>
...
</body>

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

To center the map correctly, you need need the Google Maps instance in your JavaScript-file.

First we get a reference to the <mi-map-googlemaps> element. Then we attach the mapsIndoorsReady event listener so we'll know when MapsIndoors is ready after loading. Lastly, on the mapsIndoorsReady event, get the Google Map instance and call its setCenter method to center the map on the loaded data:

// main.js

const miMapElement = document.querySelector('mi-map-googlemaps');

miMapElement.addEventListener('mapsIndoorsReady', () => {
miMapElement.getMapInstance().then((mapInstance) => {
mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
});
})

For more information on how to configure the <mi-map-googlemaps> component, see components.mapsindoors.com/map-googlemaps.

You should now see a Google Maps map 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 googleMapsInstance = mapViewInstance.getMap();

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

Using the <mi-map-googlemaps> element, you can add the floorSelectorControlPosition attribute to your existing element. In this case with the value "TOP_RIGHT":

<!-- index.html -->

<mi-map-googlemaps
...
floor-selector-control-position="TOP_RIGHT">

</mi-map-googlemaps>

See all available control positions in the Google Maps Documentation.

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

Next up: Search