Full Screen GControl for Google Maps

Use with phoogle modified class: (see an example here)
To use it in the phoogle modified class just turn it on by setting to true the showFSbutton propertie and include the fsaddon.js and the famous prototype.js file.
To make this control work you also have to call the html element that contains the map “mapcontainer” or you have to set the “mapContainerId” properties to match your container element.

Use without the phoogle modified class:
You can use this javascript without the phoogle modified class by setting this 3 attributes on your map div:

• w=”width in pixel”
• h=”height in pixel”
• c=”id of the container of the div map”

Example:

<div id='mapcontainer'><div id="map" c='mapcontainer' w='550' h='150'></div></div>

I know. It’s not so elegant and you can do it better.

Here is the source code (download fsaddon.js):

function FullScreenControl() {
}
FullScreenControl.prototype = new GControl();

FullScreenControl.prototype.initialize = function(map) {
  var container = document.createElement('div');
  var switchDiv = document.createElement('div');
  this.setButtonStyle_(switchDiv);
  container.appendChild(switchDiv);
  switchDiv.appendChild(document.createTextNode('Fullscreen'));
  GEvent.addDomListener(switchDiv, 'click', function() {
	  var mapNode = this.parentNode.parentNode;
		var aW = $(mapNode.id).getWidth();
		var aH = $(mapNode.id).getHeight();

		var winW = 0, winH = 0;
		if (parseInt(navigator.appVersion)>3) {
			if (navigator.appName=="Netscape") {
				winW = window.innerWidth;
				winH = window.innerHeight;
			}
			if (navigator.appName.indexOf("Microsoft")!=-1) {
				winW = document.body.offsetWidth;
				winH = document.body.offsetHeight;
			}
		}

		if(""+$(mapNode.id).getAttribute("w") +"x"+$(mapNode.id).getAttribute("h") != ""+aW+"x"+aH) {
			$($(mapNode.id).getAttribute("c")).insertBefore($(mapNode.id), $($(mapNode.id).getAttribute("c")).firstChild);
			$(mapNode.id).style.width = $(mapNode.id).getAttribute("w")+"px";
			$(mapNode.id).style.height = $(mapNode.id).getAttribute("h")+"px";
			$(mapNode.id).style.position = "relative";
			$(mapNode.id).style.left = "0px";
			$(mapNode.id).style.top = "0px";
			map.checkResize();
			this.innerHTML='Fullscreen';
		} else {
			var objBody = document.getElementsByTagName("body").item(0);
			objBody.insertBefore($(mapNode.id), objBody.firstChild);
			$(mapNode.id).style.position = "absolute";
			$(mapNode.id).style.zIndex = 999;
			$(mapNode.id).style.width = "100%";
			$(mapNode.id).style.height = "100%";
			$(mapNode.id).style.left = "0px";
			$(mapNode.id).style.top = "0px";
			$(mapNode.id).scrollTo();
			map.checkResize();
			this.innerHTML='Normal';
		}

	});

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
FullScreenControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 100));
}

FullScreenControl.prototype.setButtonStyle_ = function(button) {
  button.style.color = "#000000";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "2px outset black";
  button.style.padding = "0px";
  button.style.textAlign = "center";
  button.style.width = "5em";
  button.style.cursor = "pointer";
}