Как сделать фул-скрин во весь экран на JS - JavaScript, Ajax - Страница 2

pompiduskus · 08.05.2016, 13:21

Попробуй вот так.

Код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>google.maps</title>

    <style type="text/css">

    html, body{
        height: 100%; width: 100%; padding: 0; margin: 0;
    }

    </style>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

        // ==================================================================
        var map;
        var map_canvas;
        var latlng;
        var settings;
        var full_screen = false;

        var SCREEN = {
            "full" : {
                "width" : "100%",
                "height" : "100%"
            },

            "deff" : {
                "width" : "500px",
                "height" : "300px"
            },

        }

        // ==================================================================
        window.addEventListener("load", function(){

            map_canvas = document.getElementById('map_canvas');
            initialize();
            //console.log( location.href ); // ./google.maps.html?lan=60.000&lon=3.003

        });

        // ==================================================================
        function fullScreenAction() {

            if(full_screen){

                full_screen = !full_screen;
                map_canvas.style.width = SCREEN.deff.width;
                map_canvas.style.height = SCREEN.deff.height;
                initialize();

            }else{

                full_screen = !full_screen;
                map_canvas.style.width = SCREEN.full.width;
                map_canvas.style.height = SCREEN.full.height;
                initialize();
            }

        }

        // ==================================================================
        function initialize() {

            latlng = new google.maps.LatLng( 50.84193598, 3.84193598 );

            settings = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map( map_canvas, settings ); 
        }

        // ==================================================================

    </script>

</head>
<body>

    <div id="full_screen_btn" style="position: absolute; margin: 10px 0 0 150px; z-index: 2; background: #333; padding: 5px; color: #fff;" onclick="fullScreenAction()">Full Screen</div>
    <div id="map_canvas" style="display: block; width:500px; height:300px; border: solid 1px #000;"> Loading ...</div>

</body>
</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как программно развернуть форму на весь экран?	chandrasecar	Общие вопросы Delphi	6	26.07.2015 10:39
Как развернуть видео на весь экран	xays	HTML и CSS	0	04.04.2012 18:32
Visual Studio,C#.Как сделать форму во весь экран?	Nikitok	Помощь студентам	0	05.10.2010 21:36
как запретить раскрытия формы на весь экран?	designer999	Общие вопросы Delphi	10	18.02.2010 16:07
сделать программу на весь экран	Killbrum	Помощь студентам	10	09.09.2008 09:50