Lazy Load Google Map Event Display

Google Maps Event Display

by Chris Goodman

HTML

<div id="main">
  <h1>
Show Events when drawing a polygon
</h1>
  <p>Based on <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/map_events/map_events.html">google sample code</a>.
  </p>
  <p>
    Drawing and Data Layer events added by the author.
  </p>
  <p>


    Modified to use Lazy Loading based on <a href="http://jsfiddle.net/gavinfoley/yD8Qt/"> fiddle by Gavin Foley </a> to work on jsfiddle.
  </p>
  <p>
    This page lists all the events that can be triggered for the
    <code> 
        google.maps.Map
        </code> object and shows when that happens, by highlighting the names to the right.
  </p>
  Play around with the map and see what happens. For more information check
  <a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#Map">the API reference</a>.

  <div id="map">
    <h2> 
          Map
        </h2>
    <div id="map-canvas">
    </div>
  </div>
  <div id="events">
    <h2> 
          Events
        </h2>
    <table width="100%" id="event_descr">
    </table>
  </div>
</div>

CSS

body {
        color: #585858;
        font-family: sans-serif;
        font-size: 10pt;
      }
      
      table {
        border-spacing: 2px;
        text-align: left;
      }
      
      tr {
        background-color: white;
        -webkit-transition: background-color 0.2s linear;
      }
      
      #map-canvas {
        width: 600px;
        height: 400px;
      }
      
      #map {
        float: left;
        width: 650px;
      }
      
      #events {
        overflow: hidden;
      }

JavaScript

var params;
    var events = {
      'addfeature': 'data layer event',
      'click': 'data layer event',
      'dblclick': 'data layer event',
      'mousedown': 'data layer event',
      'mouseout': 'data layer event',
      'mouseover': 'data layer event',
      'mouseup': 'data layer event',
      'removefeature': 'data layer event',
      'removeproperty': 'data layer event',
      'rightclick': 'data layer event',
      'setgeometry': 'data layer event',
      'setproperty': 'data layer event',
      'circlecomplete': 'This event is fired when the user has finished drawing a circle',
      'markercomplete': 'This event is fired when the user has finished drawig a marker',
      'overlaycomplete': 'This event is fired when the user has finished drawing an overlay of any type',
      'polygoncomplete': 'This event is fired when the user has finished drawing a polygon',
      'polylinecomplete': 'This event is fired when the user has finished drawing a polyline',
      'rectanglecomplete': 'This event is fired when the user has finished drawing a rectangle',

      'bounds_changed': 'fired when the viewport bounds have changed.',
      'center_changed': 'fired when the map center property changes.',
      'click': 'fired when the user clicks on the map (but not when they click on a marker or infowindow).',
      'dblclick': 'fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.',
      'drag': 'repeatedly fired while the user drags the map.',
      'dragend': 'fired when the user stops dragging the map.',
      'dragstart': 'fired when the user starts dragging the map.',
      'heading_changed': 'fired when the map heading property changes.',
      'idle': 'fired when the map becomes idle after panning or zooming.',
      'maptypeid_changed': 'fired when the mapTypeId property changes.',
      'mousemove': 'fired whenever the user\'s mouse moves over the map container.',
      'mouseout': 'fired when the...