Untitled

<!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=AIzaSyDCkYB76QzhTAx26dDiRP2l6pe2cqVZ3PY"></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>