This page describes the user interface events and error events that you can
listen for and handle programmatically.
## User Interface Events
This section outlines the interactive events and state change notifications you
can listen for and handle programmatically when working with 3D maps. JavaScript
within the browser is event-driven, meaning it responds to user interactions by
generating events that your program can listen to and execute code accordingly.
There are two main types of events:
- User interaction events (such as mouse clicks) are propagated from the 3D map viewport to your code. These events allow you to respond to direct user actions within the 3D map environment. [View
sample](https://developers.google.com/maps/documentation/javascript/examples/3d/polygon-click-event).
- State change notifications reflect updates to the underlying 3D map data models and rendering state, using a conventional `gmp-propertychange` naming scheme.
Each 3D mapping API object exposes a set of named events that your program can
register event listeners for and execute logic when those events occur using the
built-in `addEventListener()` function.
The following example shows which events are triggered as a user interacts with
the map:
#### See the complete example source code
### TypeScript
```typescript
const mapElement = document.querySelector('gmp-map-3d')!;
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
const events = [...document.querySelectorAll('div > p')].map(
(i) => i.textContent
);
for (const event of events) {
mapElement?.addEventListener(event, () => {
const eventElement = document.querySelector(`#${event}`);
eventElement?.classList.add('active');
setTimeout(() => {
eventElement?.classList.remove('active');
}, 1000);
});
}
}
void init();
```
### JavaScript
```javascript
const mapElement = document.querySelector('gmp-map-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
const events = [...document.querySelectorAll('div > p')].map(
(i) => i.textContent
);
for (const event of events) {
mapElement?.addEventListener(event, () => {
const eventElement = document.querySelector(`#${event}`);
eventElement?.classList.add('active');
setTimeout(() => {
eventElement?.classList.remove('active');
}, 1000);
});
}
}
void init();
```
### CSS
```css
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: row;
}
gmp-map-3d {
flex-grow: 1;
}
.myaside {
flex-basis: 25%;
font-family:
Droid Sans Mono,
monospace;
font-size: 15px;
padding: 2px;
}
.myaside > p.active {
background-color: #9cf;
}
```
### HTML
```html
3d-map-events