JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="main">
    <div id="map"></div>
    <div id="events"></div>
</div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
.event {
    transition: background-color 0.5s ease-out;
    padding-bottom: 2px;
}
#map {
    float: left;
    width: 600px;
    height: 400px;
    margin-right: 10px;
}
#events {
    padding: 2px;
    overflow: hidden;
    font-size: 15px;
    font-family:'Droid Sans Mono', monospace;
}
.active {
    background-color: #99CCFF;
}
.inactive {
    background-color: white;
}

JavaScript

var events = [
    'bounds_changed', 'center_changed', 'click',
    'dblclick', 'drag', 'dragend',
    'dragstart', 'heading_changed', 'idle',
    'maptypeid_changed', 'mousemove', 'mouseout',
    'mouseover', 'projection_changed', 'resize',
    'rightclick', 'tilesloaded', 'tilt_changed',
    'zoom_changed'];

function setupListener(map, name) {
    var timeout;
    var eventRow = document.getElementById(name);
    google.maps.event.addListener(map, name, function () {
        eventRow.className = 'event active';
        clearTimeout(timeout);
        var timeout = setTimeout(function () {
            eventRow.className = 'event inactive';
        }, 1000);
    });
}

function initialize() {
    populateTable();
    var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    for (var i = 0; i < events.length; i++) {
        setupListener(map, events[i]);
    }
}

// Dynamically create the table of events from the defined hashmap
function populateTable() {
    var eventsTable = document.getElementById('events');
    var content = '';
    for (var i = 0; i < events.length; i++) {
        content += '<div class="event" id="' + events[i] + '">' + events[i] +
            '</div>';
    }
    eventsTable.innerHTML = content;
}

// Load the map
google.maps.event.addDomListener(window, 'load', initialize);