title: How open a google map in full screen on the same page using Google Maps Api v3?
body: <p>So, my question is - I have a small map on my page and I want  open this map in a full screen on the same page by pressing a button and close it in the same way. I think it can be done by removing div styles when you press the button but I didn't succeed, may be this is a wrong way? I understand that is a simple question but my google skills aren't well developed and I just don't know how to ask this question properly, so I'm asking here.</p>
  
  <p>My code is simply generated by <a href="https://github.com/bramus/photoshop-google-maps-tile-cutter/" rel="nofollow noreferrer">GoogleMapsTileCutter</a> plus I've added some code from <a href="https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3">here</a> for limit panning. This is all code that I have done.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
      &lt;title&gt;PS_Bramus.GoogleMapsTileCutter&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;style&gt;
          html, body {
              height: 100%;
              margin: 0;
              padding: 0;
          }
          #map {
              width:100%;
              height:100%;
              color: #CCC;
              background: #EFEFEF;
          }
          span.loading {
              display: block;
              text-align: center;
              font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map"&gt;&lt;span class="loading"&gt;loading tiles...&lt;/span&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script&gt;
  
  
          /*
           * = PS_Bramus.GoogleMapsTileCutter Config
           * ----------------
           */
  
              var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false
  
  
  
          /*
           * Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
           * ----------------
           */
  
              function getNormalizedCoord(coord, zoom) {
                  if (!repeatOnXAxis) return coord;
  
                  var y = coord.y;
                  var x = coord.x;
  
                  // tile range in one direction range is dependent on zoom level
                  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                  var tileRange = 1 &lt;&lt; zoom;
  
                  // don't repeat across Y-axis (vertically)
                  if (y &lt; 0 || y &gt;= tileRange) {
                      return null;
                  }
  
                  // repeat across X-axis
                  if (x &lt; 0 || x &gt;= tileRange) {
                      x = (x % tileRange + tileRange) % tileRange;
                  }
  
                  return {
                      x: x,
                      y: y
                  };
  
              }
  
  
          /*
           * Main Core
           * ----------------
           */
  
              window.onload = function() {
  
                  // Define our custom map type
                  var customMapType = new google.maps.ImageMapType({
                      getTileUrl: function(coord, zoom) {
                          var normalizedCoord = getNormalizedCoord(coord, zoom);
                          if(normalizedCoord &amp;&amp; (normalizedCoord.x &lt; Math.pow(2, zoom)) &amp;&amp; (normalizedCoord.x &gt; -1) &amp;&amp; (normalizedCoord.y &lt; Math.pow(2, zoom)) &amp;&amp; (normalizedCoord.y &gt; -1)) {
                              return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
                          } else {
                              return 'empty.jpg';
                          }
                      },
                      tileSize: new google.maps.Size(256, 256),
                      maxZoom: 5,
                      name: 'PS_Bramus.GoogleMapsTileCutter'
                  });
  
                  // Basic options for our map
                  var myOptions = {
                      center: new google.maps.LatLng(0, 0),
                      zoom: 3,
                      minZoom: 3,
                      disableDefaultUI: true,
                      streetViewControl: false,
                      mapTypeControl: false,
                      mapTypeControlOptions: {
                          mapTypeIds: ["custom"]
                      }
                  };
  
                  // Init the map and hook our custom map type to it
                  var map = new google.maps.Map(document.getElementById('map'), myOptions);
                  map.mapTypes.set('custom', customMapType);
                  map.setMapTypeId('custom');
  
                  // bounds of the desired area
                  var allowedBounds = new google.maps.LatLngBounds(
                       new google.maps.LatLng(-47,-95.61), 
                       new google.maps.LatLng(47,95.61)
                  );
                  var lastValidCenter = map.getCenter();
  
                  google.maps.event.addListener(map, 'center_changed', function() {
                      if (allowedBounds.contains(map.getCenter())) {
                          // still within valid bounds, so save the last valid position
                          lastValidCenter = map.getCenter();
                          return; 
                      }
  
                      // not valid anymore =&gt; return to last valid position
                      map.panTo(lastValidCenter);
                  });
  
              }
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>