Move target container in to map options

examples/full-screen.js

@@ -7,8 +7,9 @@ goog.require('ol.source.MapQuestOpenAerial');
 var layer = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
-var map = new ol.Map(document.getElementById('map'), {
+var map = new ol.Map({
   center: new ol.Coordinate(0, 0),
   layers: new ol.Collection([layer]),
+  target: 'map',
   zoom: 2
 });

examples/overlay-and-popup.js

@@ -18,9 +18,10 @@ if (goog.DEBUG) {
 var layer = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
-var map = new ol.Map(document.getElementById('map'), {
+var map = new ol.Map({
   center: new ol.Coordinate(0, 0),
   layers: new ol.Collection([layer]),
+  target: 'map',
   zoom: 2
 });
 

examples/side-by-side.js

@@ -20,10 +20,11 @@ var layer = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
 
-var domMap = new ol.Map(document.getElementById('domMap'), {
+var domMap = new ol.Map({
   center: new ol.Coordinate(0, 0),
   layers: new ol.Collection([layer]),
   renderer: ol.RendererHint.DOM,
+  target: 'domMap',
   zoom: 1
 });
 
@@ -34,8 +35,9 @@ domMap.getControls().push(new ol.control.MousePosition({
   undefinedHtml: ' '
 }));
 
-var webglMap = new ol.Map(document.getElementById('webglMap'), {
-  renderer: ol.RendererHint.WEBGL
+var webglMap = new ol.Map({
+  renderer: ol.RendererHint.WEBGL,
+  target: 'webglMap'
 });
 if (!goog.isNull(webglMap)) {
   webglMap.bindTo('center', domMap);

examples/two-layers.js

@@ -22,16 +22,18 @@ var layers = new ol.Collection([
   })
 ]);
 
-var webglMap = new ol.Map(document.getElementById('webglMap'), {
+var webglMap = new ol.Map({
   center: ol.Projection.transformWithCodes(
       new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
   layers: layers,
   renderer: ol.RendererHint.WEBGL,
+  target: 'webglMap',
   zoom: 5
 });
 
-var domMap = new ol.Map(document.getElementById('domMap'), {
-  renderer: ol.RendererHint.DOM
+var domMap = new ol.Map({
+  renderer: ol.RendererHint.DOM,
+  target: 'domMap'
 });
 domMap.bindTo('center', webglMap);
 domMap.bindTo('layers', webglMap);