seimin
/
itsm-whlg


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title> 
      Google Maps V3 API Events for google.maps.Map Demo
    </title> 
    <style type="text/css"> 
      body {
       color: #585858;
       font-family: sans-serif;
      }
      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;
      }
    </style> 
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"> 
      var events = {
        '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 user\'s mouse exits the map container.',
        'mouseover': 'fired when the user\'s mouse enters the map container.',
        'projection_changed': 'fired when the projection has changed.',
        'resize': 'Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, \'resize\') .',
        'rightclick': 'fired when the DOM contextmenu event is fired on the map container.',
        'tilesloaded': 'fired when the visible tiles have finished loading.',
        'tilt_changed': 'fired when the map tilt property changes.',
        'zoom_changed': 'fired when the map zoom property changes.'
      };
 
      function setBackgroundColor(eventName, color) {
        var row = document.getElementById(eventName);
        row.style.backgroundColor = color;
      }
 
      function setupListener(map, name) {
        google.maps.event.addListener(map, name, function() {
          setBackgroundColor(name, '#99CCFF');
          setTimeout(function() {
           setBackgroundColor(name, 'white');
          }, 500);
        });
      }
 
      function initialize() {
        populateTable();
        var mapDiv = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({position: new google.maps.LatLng(37.4419, -122.1419), map: map});
        for (eventName in events) {
          setupListener(map, eventName);
        }
      }
 
      // Dynamically create the table of events from the defined hashmap
      function populateTable() {
        var eventsTable = document.getElementById('event_descr');
        var content = '';
        for (var event in events) {
          content += '<tr id="' + event + '"> <th>' + event +
            '</th> <td> ' + events[event] + '</td></tr>';
        }
        eventsTable.innerHTML = content;
      }
      // Load the map
      google.maps.event.addDomListener(window, 'load', initialize);
    </script> 
  </head> 
  <body> 
    <div id="main"> 
      <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> 
      </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>.
      </p> 
      <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> 
    </div> 
  </body> 
</html>