google maps v3 requestFullScreen

Question

Why the method "requestFullScreen" does not work on a div with google maps v3?

The browser goes into fullscreen mode, however, the map disappears.

my code:

util.requestFullScreen(map.getDiv());

score 0 · Accepted Answer · edited Jun 09 '16 at 09:28

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">
                        &times;</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>

so util is your div ? Try then: map.getDiv().requestFullScreen(); — sabotero, Oct 28 '13 at 10:33
also see this question/answer about requestFullScreen: http://stackoverflow.com/questions/9454125/javascript-request-fullscreen-is-unreliable — sabotero, Oct 28 '13 at 10:35
here is a good overview about requestFullScreen: http://www.webdesignerdepot.com/2013/03/how-to-use-the-fullscreen-api/ — sabotero, Oct 28 '13 at 10:39
fire also the resize event of the map (google.maps.event.trigger(map,"resize");) when the div has finished to go full screen. — sabotero, Oct 28 '13 at 10:42
It may be your style, make sure it look something like this #map-container { height: 100%; width:100%; }. — sabotero, Oct 28 '13 at 22:57
yes your example works correctly, my map is in a bootstrap modal... I think the problem is the modal... — edotassi, Oct 29 '13 at 15:15
check out my new edited code. I put the map in a bootstrap modal and it is working correctly. The problem it is not the modal itself but the style you put to your map div I think. — sabotero, Nov 15 '13 at 09:53

google maps v3 requestFullScreen

1 Answers1