google maps events

HTML

<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="main">
<div id="map"></div>
  <div id="events"></div>
</div>

CSS

#map {
  float: left;
  width: 600px;
  height: 400px;
  margin-right: 10px;
}
.event {
  transition: background-color 0.5s ease-out;
  padding-bottom: 2px;
}
#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 eventRow = document.getElementById(name);
  google.maps.event.addListener(map, name, function() {
    eventRow.className = 'event active';
    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.286172, 0),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable : true
  });
  
  var s = 36.886172;
  var n = 37.686172;
  var w = -0.4;
  var e = 0.4;
  
  var polygon = new google.maps.Polygon({
    paths: [[
    new google.maps.LatLng(s, w),
    new google.maps.LatLng(n, w),
    new google.maps.LatLng(n, e),
    new google.maps.LatLng(s, e),
    new google.maps.LatLng(s, w)
  ]],
    fillColor: '#00FF00'
   });

   polygon.setMap(map);

  
  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;
}

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