google Maps - Full Screen 사용하기(JavaScript)

# google Maps - Full Screen 사용하기

google API 홈페이지에 들어가보면 (https://developers.google.com/maps/documentation/javascript/examples) 각 예제마다 full screen 기능을 제공한다. full screen은 현재 map을 전체화면으로 제공하는 기능이다.

full screen source와 사용 방법을 정리해보았다.

- google API 홈페이지에서 확인할 수 있는 full screen 버튼

- full screen 버튼 클릭 전

- full screen 버튼 클릭 후

# FullScreen 기능 사용하기

HTML Source에 source를 추가해도 되지만, 아래와 같이 java-script file로 만들어 추가하여 사용하는 것을 권장한다.

<script src="js/FullScreenControl.js" type="text/javascript"></script>

source)

function FullScreenControl(map, enterFull, exitFull) {
     
    if(typeof(enterFull)==='undefined') enterFull = "Full Screen";
    if(typeof(exitFull)==='undefined') exitFull = "Exit full screen";
 
     
    var controlDiv = document.createElement("div");
    controlDiv.className = "fullScreen";
    controlDiv.index = 1;
    controlDiv.style.padding = "5px";
 
    // Set CSS for the control border.
    var controlUI = document.createElement("div");
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '22px';
    controlUI.style.textAlign = 'center';
    controlDiv.appendChild(controlUI);
 
    // Set CSS for the control interior.
    var controlText = document.createElement("div");
    var controlText = document.createElement("div");
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '13px';
    controlText.style.lineHeight = '25px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = "<strong>"+enterFull+"</strong>";
    controlUI.appendChild(controlText);
 
    // set print CSS so the control is hidden
    var head = document.getElementsByTagName("head")[0];
    var newStyle = document.createElement("style");
    newStyle.setAttribute("type", "text/css");
    newStyle.setAttribute("media", "print");
    var cssText = ".fullScreen { display: none;}";
    var texNode = document.createTextNode(cssText);
    try  {
        newStyle.appendChild(texNode);
    } catch (e) {
        // IE8 hack
        newStyle.styleSheet.cssText = cssText;
    }
    head.appendChild(newStyle);
 
    var fullScreen = false;
    var interval;
    var mapDiv = map.getDiv();
    var divStyle = mapDiv.style;
    if (mapDiv.runtimeStyle) {
        divStyle = mapDiv.runtimeStyle;
    }
    var originalPos = divStyle.position;
    var originalWidth = divStyle.width;
    var originalHeight = divStyle.height;
 
    // IE8 hack
    if (originalWidth === "") {
        originalWidth = mapDiv.style.width;
    }
    if (originalHeight === "") {
        originalHeight = mapDiv.style.height;
    }
 
    var originalTop = divStyle.top;
    var originalLeft = divStyle.left;
    var originalZIndex = divStyle.zIndex;
 
    var bodyStyle = document.body.style;
    if (document.body.runtimeStyle) {
        bodyStyle = document.body.runtimeStyle;
    }
    var originalOverflow = bodyStyle.overflow;
 
    var goFullScreen = function () {
        var center = map.getCenter();
        mapDiv.style.position = "fixed";
        mapDiv.style.width = "100%";
        mapDiv.style.height = "100%";
        mapDiv.style.top = "0";
        mapDiv.style.left = "0";
        mapDiv.style.zIndex = "100";
        document.body.style.overflow = "hidden";
        controlText.innerHTML = "<strong>"+exitFull+"</strong>";
        fullScreen = true;
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
 
        // this works around street view causing the map to disappear, which is caused by Google Maps setting the
        // CSS position back to relative. There is no event triggered when Street View is shown hence the use of setInterval
        interval = setInterval(function () {
            //console.log("Triger");
            if (mapDiv.style.position !== "fixed") {
                mapDiv.style.position = "fixed";
                google.maps.event.trigger(map, "resize");
                 
            }
        }, 100);
    };
 
    var exitFullScreen = function () {
        var center = map.getCenter();
        if (originalPos === "") {
            mapDiv.style.position = "relative";
        } else {
            mapDiv.style.position = originalPos;
        }
        mapDiv.style.width = originalWidth;
        mapDiv.style.height = originalHeight;
        mapDiv.style.top = originalTop;
        mapDiv.style.left = originalLeft;
        mapDiv.style.zIndex = originalZIndex;
        document.body.style.overflow = originalOverflow;
        controlText.innerHTML = "<strong>"+enterFull+"</strong>";
        fullScreen = false;
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
        clearInterval(interval);
    };
 
    // Setup the click event listener
    google.maps.event.addDomListener(controlUI, "click", function () {
        if (!fullScreen) {
            goFullScreen();
        } else {
            exitFullScreen();
        }
    });
 
    return controlDiv;
}

사용 예시)

<head>
<script>
 
...
 
function initMap() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 17,
    center: {lat: -33.8666, lng: 151.1958}
  });
 
  // CASE 1)
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map));
  
  // CASE 2)
  // map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map,"Enter Text","Exit Text"));
}
 
...
 
</script>
</head>
<body>
 
    ...
 
    <div id="map-canvas" class="fullScreen" style="width:auto !important; height:400px;"></div>
 
    ...
 
</body>
 

CASE 1 로직으로 function 호출 시,  아래의 로직에 의해 'Full Screen', 'Exit full screen'으로 버튼명이 셋팅된다. (default 값)

if(typeof(enterFull)==='undefined') enterFull = "Full Screen";
if(typeof(exitFull)==='undefined') exitFull = "Exit full screen";

CASE 2 로직으로 function 호출 시,  ' Enter Text', 'Exit Text'로 버튼명이 셋팅된다.

source에 controlUI와 controlText를(CSS 설정영역) 사용자의 취향에 맞게 수정하여 사용하기 바란다.

- 참고 : 

https://developers.google.com/maps/documentation/javascript/3.25/reference?hl=ko#MapOptions

https://www.doogal.co.uk/FullScreen.php

https://www.dropbox.com/s/b3d182h4f3b7g5w/FullScreenControl.js?dl=0