function MapControls(opts) {
    google.maps.OverlayView.call(this);
    this.map_ = opts.map;
    this.set_map(this.map_);    
}
MapControls.prototype = new google.maps.OverlayView();
MapControls.prototype.draw = function() {
    //this.createElement();
    //if (!this.div_) return;
    //fromLatLngToDivPixel(latLng:LatLng)
    var bounds = this.map_.get_bounds();
    if (bounds) {
        var foo = this.get_projection().fromLatLngToDivPixel(bounds.getSouthWest());
        //this.div.style.bottom = foo.y + 'px';
        this.div.style.left = foo.x + 'px';
    }

    if (this.div) return;

    var panes = this.get_panes();
    var div = document.createElement("div");
    div.style.border = "1px solid #384A54";
    div.style.width = "300px";
    div.style.height = "200px";
    div.style.position = "absolute";
    div.innerHTML = "<h1>FOO!</h1>";
    panes.floatPane.appendChild(div);
    this.div = div;
};
MapControls.prototype.createElement = function() {
    var panes = this.get_panes();
    var self = this;
    var div = this.div_;
    if (!div) {
        div = this.div_ = document.createElement("div");
        div.style.border = "1px solid #384A54";
        div.style.width = "40px";
        div.style.height = "200px";

        var zoomInBtn = document.createElement("div");
        zoomInBtn.innerHTML = "zoom in";

        google.maps.event.addDomListener(zoomInBtn, 'click', function() {
            self.map_.panBy(100, 0);
        });
        div.appendChild(zoomInBtn);
        panes.floatPane.appendChild(div);
        //this.panMap();
    } else if (div.parentNode != panes.floatPane) {
        // The panes have changed.  Move the div.
        div.parentNode.removeChild(div);
        panes.floatPane.appendChild(div);
    } else {
        // The panes have not changed, so no need to create or move the div.
    }
}