japboy/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>page.js</title>

    <link rel="stylesheet" href="//openlayers.org/en/v3.6.0/css/ol.css">
    <style>
      #toggle {
        position: absolute;
        z-index: 1;
      }
      #map-canvas {
        height: 80%;
        left: 5%;
        position: absolute;
        top: 10%;
        width: 90%;
        z-index: 0;
      }
    </style>

    <script src="//openlayers.org/en/v3.6.0/build/ol.js"></script>
    <script defer>
      (function (w, d, n, ol) {

        var fragment = d.createDocumentFragment();

        var mapCanvas = d.createElement('div');
        mapCanvas.setAttribute('id', 'map-canvas');

        var lnglat = [139.6833, 35.6833];
        var map = new ol.Map({
          layers: [
            new ol.layer.Tile({ source: new ol.source.OSM() })
          ],
          view: new ol.View({
            center: ol.proj.transform(lnglat, 'EPSG:4326', 'EPSG:3857'),
            zoom: 9
          })
        });

        var reset = function () {
          map.setTarget(mapCanvas);
        };

        var toggled = true;

        var toggle = function () {
          if (toggled) {
            fragment.appendChild(mapCanvas);
            toggled = false;
          } else {
            d.body.appendChild(fragment);
            reset();
            toggled = true;
          }
        };

        var main = function (ev) {
          ev.target.removeEventListener(ev.type, main);

          d.getElementById('toggle').addEventListener('click', toggle, false);

          d.body.appendChild(mapCanvas);
          reset();
        };

        d.addEventListener('DOMContentLoaded', main, false);

      })(window, document, navigator, ol);
    </script>

  </head>
  <body>
    <button id="toggle">toggle map view</button>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>page.js</title>

	<link rel="stylesheet" href="//openlayers.org/en/v3.6.0/css/ol.css">
	<style>
	#toggle {
	position: absolute;
	z-index: 1;
	}
	#map-canvas {
	height: 80%;
	left: 5%;
	position: absolute;
	top: 10%;
	width: 90%;
	z-index: 0;
	}
	</style>

	<script src="//openlayers.org/en/v3.6.0/build/ol.js"></script>
	<script defer>
	(function (w, d, n, ol) {

	var fragment = d.createDocumentFragment();

	var mapCanvas = d.createElement('div');
	mapCanvas.setAttribute('id', 'map-canvas');

	var lnglat = [139.6833, 35.6833];
	var map = new ol.Map({
	layers: [
	new ol.layer.Tile({ source: new ol.source.OSM() })
	],
	view: new ol.View({
	center: ol.proj.transform(lnglat, 'EPSG:4326', 'EPSG:3857'),
	zoom: 9
	})
	});

	var reset = function () {
	map.setTarget(mapCanvas);
	};

	var toggled = true;

	var toggle = function () {
	if (toggled) {
	fragment.appendChild(mapCanvas);
	toggled = false;
	} else {
	d.body.appendChild(fragment);
	reset();
	toggled = true;
	}
	};

	var main = function (ev) {
	ev.target.removeEventListener(ev.type, main);

	d.getElementById('toggle').addEventListener('click', toggle, false);

	d.body.appendChild(mapCanvas);
	reset();
	};

	d.addEventListener('DOMContentLoaded', main, false);

	})(window, document, navigator, ol);
	</script>

	</head>
	<body>
	<button id="toggle">toggle map view</button>
	</body>
	</html>