https://get2test.net/js/FullScreenControl.js

1/// <reference path="../typings/google.maps.d.ts" />
2function FullScreenControl(map, enterFull, exitFull) {
3    if (enterFull === void 0) { enterFull = null; }
4    if (exitFull === void 0) { exitFull = null; }
5    if (enterFull == null) {
6        enterFull = "Full screen";
7    }
8    if (exitFull == null) {
9        exitFull = "Exit full screen";
10    }
11    var controlDiv = document.createElement("div");
12    controlDiv.className = "fullScreen";
13    controlDiv.index = 1;
14    controlDiv.style.padding = "5px";
15    // Set CSS for the control border.
16    var controlUI = document.createElement("div");
17    controlUI.style.backgroundColor = "white";
18    controlUI.style.borderStyle = "solid";
19    controlUI.style.borderWidth = "1px";
20    controlUI.style.borderColor = "#717b87";
21    controlUI.style.cursor = "pointer";
22    controlUI.style.textAlign = "center";
23    controlUI.style.boxShadow = "rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
24    controlDiv.appendChild(controlUI);
25    // Set CSS for the control interior.
26    var controlText = document.createElement("div");
27    controlText.style.fontFamily = "Roboto,Arial,sans-serif";
28    controlText.style.fontSize = "11px";
29    controlText.style.fontWeight = "400";
30    controlText.style.paddingTop = "1px";
31    controlText.style.paddingBottom = "1px";
32    controlText.style.paddingLeft = "6px";
33    controlText.style.paddingRight = "6px";
34    controlText.innerHTML = "<strong>" + enterFull + "</strong>";
35    controlUI.appendChild(controlText);
36    // set print CSS so the control is hidden
37    var head = document.getElementsByTagName("head")[0];
38    var newStyle = document.createElement("style");
39    newStyle.setAttribute("type", "text/css");
40    newStyle.setAttribute("media", "print");
41    var cssText = ".fullScreen { display: none;}";
42    var texNode = document.createTextNode(cssText);
43    try {
44        newStyle.appendChild(texNode);
45    }
46    catch (e) {
47        // IE8 hack
48        newStyle.styleSheet.cssText = cssText;
49    }
50    head.appendChild(newStyle);
51    var fullScreen = false;
52    var interval;
53    var mapDiv = map.getDiv();
54    var divStyle = mapDiv.style;
55    if (mapDiv.runtimeStyle) {
56        divStyle = mapDiv.runtimeStyle;
57    }
58    var originalPos = divStyle.position;
59    var originalWidth = divStyle.width;
60    var originalHeight = divStyle.height;
61    // IE8 hack
62    if (originalWidth === "") {
63        originalWidth = mapDiv.style.width;
64    }
65    if (originalHeight === "") {
66        originalHeight = mapDiv.style.height;
67    }
68    var originalTop = divStyle.top;
69    var originalLeft = divStyle.left;
70    var originalZIndex = divStyle.zIndex;
71    var bodyStyle = document.body.style;
72    if (document.body.runtimeStyle) {
73        bodyStyle = document.body.runtimeStyle;
74    }
75    var originalOverflow = bodyStyle.overflow;
76    controlDiv.goFullScreen = function () {
77        var center = map.getCenter();
78        mapDiv.style.position = "fixed";
79        mapDiv.style.width = "100%";
80        mapDiv.style.height = "100%";
81        mapDiv.style.top = "0";
82        mapDiv.style.left = "0";
83        mapDiv.style.zIndex = "100";
84        document.body.style.overflow = "hidden";
85        controlText.innerHTML = "<strong>" + exitFull + "</strong>";
86        fullScreen = true;
87        google.maps.event.trigger(map, "resize");
88        map.setCenter(center);
89        // this works around street view causing the map to disappear, which is caused by Google Maps setting the 
90        // CSS position back to relative. There is no event triggered when Street View is shown hence the use of setInterval
91        interval = setInterval(function () {
92            if (mapDiv.style.position !== "fixed") {
93                mapDiv.style.position = "fixed";
94                google.maps.event.trigger(map, "resize");
95            }
96        }, 100);
97    };
98    controlDiv.exitFullScreen = function () {
99        var center = map.getCenter();
100        if (originalPos === "") {
101            mapDiv.style.position = "relative";
102        }
103        else {
104            mapDiv.style.position = originalPos;
105        }
106        mapDiv.style.width = originalWidth;
107        mapDiv.style.height = originalHeight;
108        mapDiv.style.top = originalTop;
109        mapDiv.style.left = originalLeft;
110        mapDiv.style.zIndex = originalZIndex;
111        document.body.style.overflow = originalOverflow;
112        controlText.innerHTML = "<strong>" + enterFull + "</strong>";
113        fullScreen = false;

114        google.maps.event.trigger(map, "resize");
115        map.setCenter(center);
116        clearInterval(interval);
117    };
118    // Setup the click event listener
119    google.maps.event.addDomListener(controlUI, "click", function () {
120        if (!fullScreen) {
121            controlDiv.goFullScreen();
122        }
123        else {
124            controlDiv.exitFullScreen();
125        }
126    });
127    return controlDiv;
128}