Html 如何使用GoogleMapAPI在GoogleMap上绘制矩形

我是stackoveflow的新手，有谁能帮助我如何使用google api v3绘制矩形，我在google上浏览了一些示例，我得到了下面的代码

function initialize() {

  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;

  var myOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  rectangle = new google.maps.Rectangle();

  google.maps.event.addListener(map, 'zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    var rectOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    };
    rectangle.setOptions(rectOptions);
  });
}

但是，它在zoom事件（zoom chanages）上起作用，我希望使用简单的out事件，请帮助我

map.getBounds（）在调用早期（在映射实例化之后立即）时可能返回不需要的边界

您可以使用tilesloaded代替

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     /*your code*/
  });