JavaScript Request Fullscreen Is Unreliable

Javascript request fullscreen is unreliable

requestFullscreen() can not be called automatically is because of security reasons (at least in Chrome). Therefore it can only be called by a user action such as:

click (button, link...)
key (keydown, keypress...)

And if your document is contained in a frame:

allowfullscreen needs to be present on the <iframe> element*

* W3 Spec:

"...To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen..."

JavaScript fullscreen API not working...?

Well, using the suggestion that @Derek linked to, I was able to fix the problem. However, now I have a blank wierd white canvas on the fullscreen, but that's another problem, so thanks for everyone who helped.

Javascript fullscreen api and window height

I found out what I was missing here. fullscreen api has a change event.

document.addEventListener("fullscreenchange", function () {
    //do something
}, false);

document.addEventListener("mozfullscreenchange", function () {
    //do something
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    //do something
}, false);

document.addEventListener("msfullscreenchange", function () {
   //do something
}, false);

google maps v3 requestFullScreen

What is exactly 'util'?
You may have some sort of wrapper/helper and it is in this wrapper the error is located. Look at yours files to find what is wrong.

requestFullScreen is not a google.maps method, nor in V2 neither in V3.

----- EDITED --------

I've used the following code and is working perfectly well in Chrome and Firefox (the map does not dissapear).

It may be your style, make sure it look something like this #map-container { height: 100%; width:100%; }.

Make sure you use your GOOGLE MAPS API KEY while testing this code

----- EDITED 2 -----

I modified the code in order to put the map on a bootstrap modal. The code is working correctly in Firefox and Chrome, the map does not dissapear.

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&sensor=false">
    </script>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-container
        {
            height: 100%;
            width: 100%;
            min-width:500px;
            min-height:300px;
        }
    </style>
</head>
<body>    
    <input type="button" class="btn btn-primary btn-lg" value="Show Map" onclick="OpenModal()">

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×</button>
                    <h4 class="modal-title">
                        Map</h4>
                </div>
                <div class="modal-body">
                    <div id="map-container">
                        Div map
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                    <input type="button" class="btn btn-success" value="FullSize" onclick="FullScreen()">
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script type="text/javascript">
        var map;
        $(document).ready(function () {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map($("#map-container")[0], mapOptions);
        });
        function FullScreen() {
            var element = map.getDiv();  //$("#map-container")[0];
            if (element.requestFullscreen) {
                element.requestFullscreen();
            }
            if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
            if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            }
        }
        function OpenModal() {
            var options = { backdrop : false };            

            $('#myModal').on('shown.bs.modal', function () {
                google.maps.event.trigger(map, 'resize');
            });

            $('#myModal').modal(options);
        }
    </script>
</body>
</html>

How to discover why canvas.requestFullscreen() failed?

For security reasons requestFullscreen can only be called in an event handler of a keyboard or click event.

see also Javascript request fullscreen is unreliable

JavaScript Request Fullscreen Is Unreliable