google maps events

by Leo

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

function initialize() {
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.286172, Number('-')),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  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]);
  }
}

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