The map now has a viewport and can render to a container.

css/ol.css

@@ -1 +1,2 @@
-.ol-renderer-webgl-canvas { width:100%;height:100%; }
+.ol-viewport { width:100%; height:100%; position:relative; left:0; top:0; }
+.ol-renderer-webgl-canvas { width:100%; height:100%; }

src/api/map.js

@@ -18,7 +18,7 @@ ol.MapLike;
  * @param {ol.MapLike=} opt_arg Argument.
  * @return {ol.Map} Map.
  */
-ol.map = function(opt_arg){
+ol.map = function(opt_arg) {
 
     /** @type {ol.Loc|undefined} */
     var center;
@@ -36,6 +36,8 @@ ol.map = function(opt_arg){
     var maxRes;
     /** @type {Array.<number>|undefined} */
     var resolutions;
+    /** @type {Element|string|undefined} */
+    var el;
     /** @type {Array|undefined} */
     var layers;
     /** @type {Array|undefined} */
@@ -54,6 +56,7 @@ ol.map = function(opt_arg){
             maxExtent = opt_arg['maxExtent'];
             maxRes = opt_arg['maxRes'];
             resolutions = opt_arg['resolutions'];
+            el = opt_arg['el'];
             layers = opt_arg['layers'];
             controls = opt_arg['controls'];
         }
@@ -63,6 +66,9 @@ ol.map = function(opt_arg){
     }
     
     var map = new ol.Map();
+    if (goog.isDef(el)) {
+        map.el(el);
+    }
     if (goog.isDef(center)) {
         map.setCenter(ol.loc(center));
     }
@@ -244,3 +250,12 @@ ol.Map.prototype.maxRes = function(opt_arg) {
 ol.Map.prototype.getResForZoom = function(arg) {
     return this.getResolutionForZoom(arg);
 };
+
+/**
+ * @param {string|Element} arg Render the map to a container
+ * @returns {ol.Map}
+ */
+ol.Map.prototype.el = function(arg) {
+    this.setContainer(goog.dom.getElement(arg));
+    return this;
+};

src/ol/Map.js

@@ -74,6 +74,12 @@ ol.Map = function() {
      */
     this.maxRes_ = undefined;
     
+    /**
+     * @private
+     * @type {Element}
+     */
+    this.viewport_ = null;
+    
     /**
      * @private
      * @type {ol.event.Events}
@@ -332,6 +338,16 @@ ol.Map.prototype.setMaxRes = function(res) {
 ol.Map.prototype.setContainer = function(container) {
     this.events_.setElement(container);
     this.container_ = container;
+    this.setViewport();
+};
+
+ol.Map.prototype.setViewport = function() {
+    if (!this.viewport_) {
+        this.viewport_ = goog.dom.createDom(
+            'div', 'ol-viewport'
+        );
+        goog.dom.appendChild(this.container_, this.viewport_);
+    }
 };
 
 /**