How do I create a show full screen button to toggle my google maps page to be full screen?

Here's a jQuery implementation.

$("#map_toggler").click(function() {
  $("#map").toggleClass("fullscreen")
});

In the CSS:

#map {
  width: 400px;
  height: 200px;
}

#map.fullscreen {
  position: fixed;
  width:100%;
  height: 100%;
}

Untested, but something along the lines of that should work.

If you have a map on your page all you need to do is write some javascript to resize the DIV that holds the map. I haven't implemented an example that resizes the DIV to fill the browser, but here is one that toggles the size of a map div from javascript (I use mooTools to set the style.width on the element, but you can use whatever you prefer to manipulate the DOM).

On Dom ready:

• Init map and set center
• Get the current CSS size of the div containing the map

On enter-fullscreen-button click:

• Update the CSS (size and position)
• Trigger the resize map method
• Set map center

On exit-fullscreen-button click:

• Update the CSS (back to the initial size and position)
• Trigger the resize map method
• Set map center

You can find the code here