japboy/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adjustment Test of Google Maps API</title>

    <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="//maps.googleapis.com/maps/api/js?key=AIzaSyCAdLvkz33nxRiABwlqlcBXYccNd0lRnGI"></script>
    <script defer>
      (function (w, d, n, GM) {

        var fragment = d.createDocumentFragment();

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

        // It's OK to instantiate Map constructor before `DOMContentLoaded`
        // IF you call `reset` process below after appending to DOM
        var latLng = new GM.LatLng(35.6833, 139.6833);
        var map = new GM.Map(mapCanvas, { center: latLng, zoom: 10 });

        var toggled = true;

        // Important process to redraw Google Maps DOM
        var reset = function (center, zoom) {
          // Force the map to trigger resize event
          GM.event.trigger(map, 'resize');
          // Adjust center and zoom from previous values
          map.setCenter(center || map.getCenter());
          map.setZoom(zoom || map.getZoom());
        };

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

        var main = function () {
          GM.event.addDomListener(d.getElementById('toggle'), 'click', toggle);

          d.body.appendChild(mapCanvas);  // Insert into the actual DOM
          mapCanvas.style.position = 'absolute';  // Override Google Maps style once
          reset(latLng, 10);  // Do reset
        };

        GM.event.addDomListener(w, 'load', main);

      })(window, document, navigator, google.maps);
    </script>

  </head>
  <body>
    <button id="toggle">toggle map view</button>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Adjustment Test of Google Maps API</title>

	<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="//maps.googleapis.com/maps/api/js?key=AIzaSyCAdLvkz33nxRiABwlqlcBXYccNd0lRnGI"></script>
	<script defer>
	(function (w, d, n, GM) {

	var fragment = d.createDocumentFragment();

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

	// It's OK to instantiate Map constructor before `DOMContentLoaded`
	// IF you call `reset` process below after appending to DOM
	var latLng = new GM.LatLng(35.6833, 139.6833);
	var map = new GM.Map(mapCanvas, { center: latLng, zoom: 10 });

	var toggled = true;

	// Important process to redraw Google Maps DOM
	var reset = function (center, zoom) {
	// Force the map to trigger resize event
	GM.event.trigger(map, 'resize');
	// Adjust center and zoom from previous values
	map.setCenter(center \|\| map.getCenter());
	map.setZoom(zoom \|\| map.getZoom());
	};

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

	var main = function () {
	GM.event.addDomListener(d.getElementById('toggle'), 'click', toggle);

	d.body.appendChild(mapCanvas); // Insert into the actual DOM
	mapCanvas.style.position = 'absolute'; // Override Google Maps style once
	reset(latLng, 10); // Do reset
	};

	GM.event.addDomListener(w, 'load', main);

	})(window, document, navigator, google.maps);
	</script>

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