一个产生随机random markers 例子

看看下面代码，写的非常好：
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
</head>
<body>
<style>
  body, h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
  }

  #sideContainer {
    list-style-type: none;
    padding: 0;
    margin: 0 10px 0 0;
    float: left;
    border: 1px solid #676767;
    background-color: #eee;
    overflow: auto;
  }
  #sideContainer li {
    font-size: 0.9em;
    border-bottom: 1px solid #aaa;
    padding: 5px;
  }
  
  #mapContainer {
    float: left;
     500px;
    height: 400px;
  }
  
  #generateLink {
    background-color: #fff;
    border: 2px ridge #000;
    color: #00c;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: bold;
    left: 300px;
    padding: 1px 2px;
    position: relative;
    text-align: center;
    text-decoration: underline;
    top: 24px;
     130px;
    z-index: 1000;
  }
</style>

<div id="generateLink" style="display: none;">Generate markers</div>

<ul id="sideContainer"></ul>
<div id="mapContainer"></div>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
var Demo = {
  map: null,
  mapContainer: document.getElementById('mapContainer'),
  sideContainer: document.getElementById('sideContainer'),
  generateLink: document.getElementById('generateLink'),
  numMarkers: 40,
  markers: [],
  visibleInfoWindow: null,

  generateTriggerCallback: function(object, eventType) {
    return function() {
      google.maps.event.trigger(object, eventType);
    };
  },

  openInfoWindow: function(infoWindow, marker) {
    return function() {
      // Close the last selected marker before opening this one.
      if (Demo.visibleInfoWindow) {
        Demo.visibleInfoWindow.close();
      }

      infoWindow.open(Demo.map, marker);
      Demo.visibleInfoWindow = infoWindow;
    };
  },

  clearMarkers: function() {
    for (var n = 0, marker; marker = Demo.markers[n]; n++) {
      marker.setVisible(false);
    }
  },

  generateRandomMarkers: function(center) {
    // Populate side bar.
    var avg = {
      lat: 0,
      lng: 0
    };

    var ul = Demo.sideContainer;
    ul.style.width = 200 + 'px';
    ul.style.height = Demo.map.getDiv().offsetHeight + 'px';

    // Clear list and map markers.
    ul.innerHTML = '';
    Demo.clearMarkers();

    for (var n = 1; n <= Demo.numMarkers; n++) {
      var html = 'Opening marker #' + n;

      // Place markers on map randomly.
      var randX = Math.random();
      var randY = Math.random();
      randX *= (randX * 1000000) % 2 == 0 ? 1 : -1;
      randY *= (randY * 1000000) % 2 == 0 ? 1 : -1;
      var randLatLng = new google.maps.LatLng(
          center.lat() + (randX * 0.1),
          center.lng() + (randY * 0.1));
      var marker = new google.maps.Marker({
        map: Demo.map,
        title: 'Marker #' + n,
        position: randLatLng,
        draggable: true
      });
      Demo.markers.push(marker);

      // Create marker info window.
      var infoWindow = new google.maps.InfoWindow({
        content: [
          '<h3 style="">',
          'Marker #' + n,
          '</h3>',
          'Located at:',
          '<div style="font-size: 0.8em;">',
          randLatLng.lat() + ', ' + randLatLng.lng(),
          '</div>'
        ].join(''),
        size: new google.maps.Size(200, 80)
      });

      // Add marker click event listener.
      google.maps.event.addListener(
          marker, 'click', Demo.openInfoWindow(infoWindow, marker));

      // Generate list elements for each marker.
      var li = document.createElement('li');
      var aSel = document.createElement('a');
      aSel.href = 'javascript:void(0);';
      aSel.innerHTML = 'Open Marker #' + n;
      aSel.onclick = Demo.generateTriggerCallback(marker, 'click');
      li.appendChild(aSel);
      ul.appendChild(li);

      // Sum up all lat/lng to calculate center all points.
      avg.lat += randLatLng.lat();
      avg.lng += randLatLng.lng();
    }

    // Center map.
    Demo.map.setCenter(new google.maps.LatLng(
        avg.lat / Demo.numMarkers, avg.lng / Demo.numMarkers));
  },

  init: function() {
    var firstLatLng = new google.maps.LatLng(37.4419, -122.1419);
    Demo.map = new google.maps.Map(Demo.mapContainer, {
      zoom: 12,
      center: firstLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Show generate link only after map tiles finish loading.
    google.maps.event.addListener(Demo.map, 'tilesloaded', function() {
      Demo.generateLink.style.display = 'block';
    });

    // Add onclick handler to generate link.
    google.maps.event.addDomListener(Demo.generateLink, 'click', function() {
      Demo.generateRandomMarkers(Demo.map.getCenter());
    });

    // Generate markers against map center.
    google.maps.event.trigger(Demo.generateLink, 'click');
  }
};

google.maps.event.addDomListener(window, 'load', Demo.init, Demo);
</script>

</body>
</html>
demo演示：http://gmaps-samples-v3.googlecode.com/svn/trunk/sidebar/random-markers.html
Return the DOM object that contains the map:
map.getDiv();
trigger(instance:Object, eventName:string, var_args:*)
Triggers the given event. All arguments after eventName are passed as arguments to the listeners.