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…

Novembre 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

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

Comments on “Full Screen GControl for Google Maps”

3 thoughts

  1. velocat ha detto:

    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 ha detto:

    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 ha detto:

    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…

Dicembre 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.…

Novembre 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…

Dicembre 26, 2009

Javascript Ruler for Google Maps v3 to measure distance on map

Javascript example for measuring distances on a Google Maps with a ruler.

Dicembre 19, 2009

The Quantcast CMP broke my sites

A javascript error in CMP blocks my site.

Maggio 19, 2023