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…

November 13, 2009

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";
}

Author

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Comments on “Full Screen GControl for Google Maps”

3 thoughts

  1. velocat says:

    THXS for this script!

    If you do not have necessity to use in other scripts heavy enough PROTOTYPE, it is necessary to substitute $ on document.getElementById

    Thats my code:

    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 elem_map = document.getElementById(mapNode.id);

    var aW = elem_map.offsetWidth;
    var aH = elem_map.offsetHeight;

    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(“”+elem_map.getAttribute(“w”) +”x”+elem_map.getAttribute(“h”) != “”+aW+”x”+aH) {

    document.getElementById(elem_map.getAttribute(“c”)).insertBefore(elem_map, document.getElementById(elem_map.getAttribute(“c”)).firstChild);
    elem_map.style.width = elem_map.getAttribute(“w”)+”px”;
    elem_map.style.height = elem_map.getAttribute(“h”)+”px”;
    elem_map.style.position = “relative”;
    elem_map.style.left = “0px”;
    elem_map.style.top = “0px”;
    map.checkResize();
    this.innerHTML=’Fullscreen’;
    map.setCenter(boundBox.getCenter(),
    map.getBoundsZoomLevel(boundBox));

    } else {
    var objBody = document.getElementsByTagName(“body”).item(0);
    objBody.insertBefore(elem_map, objBody.firstChild);
    elem_map.style.position = “fixed”;

    elem_map.style.zIndex = 999;
    elem_map.style.width = “100%”;
    elem_map.style.height = “100%”;
    elem_map.style.left = “0px”;
    elem_map.style.top = “0px”;
    //elem_map.scrollTo();

    map.checkResize();
    this.innerHTML=’Normal’;

    map.setCenter(boundBox.getCenter(),
    map.getBoundsZoomLevel(boundBox));
    }

    });

    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,27));
    }

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

  2. guido says:

    Does some one ever tried to reposition a GControl itself (e.g in case the view port becomes too small and all controls cannot be displayed next to each other).
    I would like to know how to remove a control from stage and define a new one.

  3. Mike says:

    Thanks for this, It was really helpfull!

    Mike

Comments are closed

Recommended

Clustering many markers with Google Maps v3

I’ve found this blog where Matthias Burtscher converted the Marker Cluster (like the Phoogle2) for Google Maps API v.3. Since…

December 13, 2009

Phoogle Modified Class for Google Maps

I was looking for a php class to use on Rockit.it to geo reference band, festivals, labels and other stuff.…

November 9, 2009

Decimal Degrees conversion and distance of two points on google map

Those two functions are usefull when you’re making Google Maps applications: When you show the coordinates of a point, it’s…

December 26, 2009

Ruler for Google Maps v3 to measure distance on map

I’ve made a ruler to measure distances on a Google Map V3. The file Ruler.js contains a two function: one…

December 19, 2009

Add Internet Explorer class to body to detect old browser

When you have clients that still uses an old browser, you need to handle it. This javascript function detects the…

February 27, 2017

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

April 20, 2016