map.js

  var rect;
  var map;
  var info;

  var bounds = {};

  var showNewRect = function(e) {
    // var nw = rect.getBounds().getNorthWest();
    var ne = rect.getBounds().getNorthEast();
    var sw = rect.getBounds().getSouthWest();
    // var se = rect.getBounds().getSouthEast();

    bounds = {
      nw: {
        lat: ne.lat(),
        lng: sw.lng()
      },
      ne: {
        lat: ne.lat(),
        lng: ne.lng()
      },
      sw: {
        lat: sw.lat(),
        lng: sw.lng()
      },
      se: {
        lat: sw.lat(),
        lng: ne.lng()
      }
    };

    var contentString = 'northeast ' + ne.lat() + ', ' + ne.lng() + ' <br> southwest ' + sw.lat() + ', ' + sw.lng();
    info.setContent(contentString);
    info.setPosition(ne);
    info.open(map);
  };

  var initMap = function() {
    var mapOptions = {
      center: new google.maps.LatLng(37.7833, -122.4167),
      zoom: 12
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(37.7333, -122.4967),
      new google.maps.LatLng(37.7933, -122.3867)
    );

    rect = new google.maps.Rectangle({
      bounds: bounds,
      editable: true,
      draggable: true
    });

    rect.setMap(map);

    google.maps.event.addListener(rect, 'bounds_changed', showNewRect);

    info = new google.maps.InfoWindow();
    $window.rect = rect;
  };


  google.maps.event.addDomListener(window, 'load', initMap);