Event handling

Last updated:

Overview

In this, we will take a look at the events that MapsIndoors offers and how to utilize them.

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. -- MDN web docs

For example, if the user clicks on a POI on the map, then you can react to that action by presenting the user with additional info about the POI.

A code example is shown in the JSFiddle below, but will be run through bit by bit in this guide.

Ready event

The ready event will be fired when MapsIndoors is done initializing and is ready to interact.

google.maps.event.addListener(mapsIndoors, 'ready', (e) => {
log(`MapsIndoors: Ready`);
});

Building changed event

The building changed event will be fired when the map is moved around and a new building comes in focus. This is also related to the floor selector, which will update its view to show the current building floors.

The event handler is called with a building object representing the building in focus.

google.maps.event.addListener(mapsIndoors, 'building_changed', (e) => {
log(`Building changed: ${e.buildingInfo.name}`);
});

Floor changed event

The floor changed will be fired when the floor is changed either by clicking the floor selector or by calling setFloor() on the MapsIndoors instance.

The event handler is called with the floor index of the current floor.

google.maps.event.addListener(mapsIndoors, 'floor_changed', (e) => {
log(`Floor changed: ${e}`);
});

Click event

The click event will fire when the user clicks on a POI or area on the map.

The event handler is called with a location object representing the POI or area clicked.

google.maps.event.addListener(mapsIndoors, 'click', (location) => {
log(`Clicked: ${location.properties.name}`);
});