Google Maps API v3 - how to detect when map changes to full screen mode?












6















Is there a way to detect when the user clicks the default fullscreen mode button?



These are the map options I'm using:



var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};









share|improve this question























  • I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…

    – MEGApixel23
    Dec 8 '17 at 12:08
















6















Is there a way to detect when the user clicks the default fullscreen mode button?



These are the map options I'm using:



var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};









share|improve this question























  • I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…

    – MEGApixel23
    Dec 8 '17 at 12:08














6












6








6








Is there a way to detect when the user clicks the default fullscreen mode button?



These are the map options I'm using:



var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};









share|improve this question














Is there a way to detect when the user clicks the default fullscreen mode button?



These are the map options I'm using:



var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};






google-maps google-maps-api-3






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Sep 21 '16 at 15:32









CarlosCarlos

9841917




9841917













  • I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…

    – MEGApixel23
    Dec 8 '17 at 12:08



















  • I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…

    – MEGApixel23
    Dec 8 '17 at 12:08

















I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…

– MEGApixel23
Dec 8 '17 at 12:08





I had the same problem. Check out my solution -> stackoverflow.com/questions/47699755/…

– MEGApixel23
Dec 8 '17 at 12:08












3 Answers
3






active

oldest

votes


















8














I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:



google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );

function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}


Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:



if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {





share|improve this answer



















  • 2





    The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

    – Philipp
    Dec 12 '17 at 8:48



















4














This solution it is working for me:



/** Full Screen event */

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});





share|improve this answer
























  • for ie11, also add "MSFullscreenChange"

    – JohnnyFun
    Jan 7 at 21:36





















3














You can use HTML5 Fullscreen API which has the fullscreenchange event:




"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".




Please note that




"For the moment not all browsers are using the unprefixed version of the API".




So, for instance, in Mozilla Firefox the event handler would look like this



document.onmozfullscreenchange = function(event) { 
console.log("Full screen change")
}





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39620850%2fgoogle-maps-api-v3-how-to-detect-when-map-changes-to-full-screen-mode%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    8














    I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:



    google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );

    function onBoundsChanged() {
    if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
    $(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
    console.log( 'FULL SCREEN' );
    }
    else {
    console.log ('NOT FULL SCREEN');
    }
    }


    Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:



    if ( $( '.gm-style' ).height() == window.innerHeight &&
    $( '.gm-style' ).width() == window.innerWidth ) {





    share|improve this answer



















    • 2





      The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

      – Philipp
      Dec 12 '17 at 8:48
















    8














    I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:



    google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );

    function onBoundsChanged() {
    if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
    $(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
    console.log( 'FULL SCREEN' );
    }
    else {
    console.log ('NOT FULL SCREEN');
    }
    }


    Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:



    if ( $( '.gm-style' ).height() == window.innerHeight &&
    $( '.gm-style' ).width() == window.innerWidth ) {





    share|improve this answer



















    • 2





      The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

      – Philipp
      Dec 12 '17 at 8:48














    8












    8








    8







    I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:



    google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );

    function onBoundsChanged() {
    if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
    $(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
    console.log( 'FULL SCREEN' );
    }
    else {
    console.log ('NOT FULL SCREEN');
    }
    }


    Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:



    if ( $( '.gm-style' ).height() == window.innerHeight &&
    $( '.gm-style' ).width() == window.innerWidth ) {





    share|improve this answer













    I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:



    google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );

    function onBoundsChanged() {
    if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
    $(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
    console.log( 'FULL SCREEN' );
    }
    else {
    console.log ('NOT FULL SCREEN');
    }
    }


    Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:



    if ( $( '.gm-style' ).height() == window.innerHeight &&
    $( '.gm-style' ).width() == window.innerWidth ) {






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Dec 1 '16 at 0:49









    DaveBurnsDaveBurns

    1,12021535




    1,12021535








    • 2





      The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

      – Philipp
      Dec 12 '17 at 8:48














    • 2





      The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

      – Philipp
      Dec 12 '17 at 8:48








    2




    2





    The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

    – Philipp
    Dec 12 '17 at 8:48





    The 'bounds_changed' event is also triggered when the map is panned/zoomed without changing to fullscreen

    – Philipp
    Dec 12 '17 at 8:48













    4














    This solution it is working for me:



    /** Full Screen event */

    $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
    var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen;
    if (isFullScreen) {
    console.log('fullScreen!');
    } else {
    console.log('NO fullScreen!');
    }
    });





    share|improve this answer
























    • for ie11, also add "MSFullscreenChange"

      – JohnnyFun
      Jan 7 at 21:36


















    4














    This solution it is working for me:



    /** Full Screen event */

    $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
    var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen;
    if (isFullScreen) {
    console.log('fullScreen!');
    } else {
    console.log('NO fullScreen!');
    }
    });





    share|improve this answer
























    • for ie11, also add "MSFullscreenChange"

      – JohnnyFun
      Jan 7 at 21:36
















    4












    4








    4







    This solution it is working for me:



    /** Full Screen event */

    $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
    var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen;
    if (isFullScreen) {
    console.log('fullScreen!');
    } else {
    console.log('NO fullScreen!');
    }
    });





    share|improve this answer













    This solution it is working for me:



    /** Full Screen event */

    $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
    var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen;
    if (isFullScreen) {
    console.log('fullScreen!');
    } else {
    console.log('NO fullScreen!');
    }
    });






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Aug 17 '17 at 9:50









    eballoeballo

    1741317




    1741317













    • for ie11, also add "MSFullscreenChange"

      – JohnnyFun
      Jan 7 at 21:36





















    • for ie11, also add "MSFullscreenChange"

      – JohnnyFun
      Jan 7 at 21:36



















    for ie11, also add "MSFullscreenChange"

    – JohnnyFun
    Jan 7 at 21:36







    for ie11, also add "MSFullscreenChange"

    – JohnnyFun
    Jan 7 at 21:36













    3














    You can use HTML5 Fullscreen API which has the fullscreenchange event:




    "When fullscreen mode is successfully engaged, the document which
    contains the element receives a fullscreenchange event. When
    fullscreen mode is exited, the document again receives a
    fullscreenchange event".




    Please note that




    "For the moment not all browsers are using the unprefixed version of the API".




    So, for instance, in Mozilla Firefox the event handler would look like this



    document.onmozfullscreenchange = function(event) { 
    console.log("Full screen change")
    }





    share|improve this answer




























      3














      You can use HTML5 Fullscreen API which has the fullscreenchange event:




      "When fullscreen mode is successfully engaged, the document which
      contains the element receives a fullscreenchange event. When
      fullscreen mode is exited, the document again receives a
      fullscreenchange event".




      Please note that




      "For the moment not all browsers are using the unprefixed version of the API".




      So, for instance, in Mozilla Firefox the event handler would look like this



      document.onmozfullscreenchange = function(event) { 
      console.log("Full screen change")
      }





      share|improve this answer


























        3












        3








        3







        You can use HTML5 Fullscreen API which has the fullscreenchange event:




        "When fullscreen mode is successfully engaged, the document which
        contains the element receives a fullscreenchange event. When
        fullscreen mode is exited, the document again receives a
        fullscreenchange event".




        Please note that




        "For the moment not all browsers are using the unprefixed version of the API".




        So, for instance, in Mozilla Firefox the event handler would look like this



        document.onmozfullscreenchange = function(event) { 
        console.log("Full screen change")
        }





        share|improve this answer













        You can use HTML5 Fullscreen API which has the fullscreenchange event:




        "When fullscreen mode is successfully engaged, the document which
        contains the element receives a fullscreenchange event. When
        fullscreen mode is exited, the document again receives a
        fullscreenchange event".




        Please note that




        "For the moment not all browsers are using the unprefixed version of the API".




        So, for instance, in Mozilla Firefox the event handler would look like this



        document.onmozfullscreenchange = function(event) { 
        console.log("Full screen change")
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Sep 22 '16 at 5:41









        Anatoly SukhanovAnatoly Sukhanov

        1,018610




        1,018610






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39620850%2fgoogle-maps-api-v3-how-to-detect-when-map-changes-to-full-screen-mode%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            How to change which sound is reproduced for terminal bell?

            Can I use Tabulator js library in my java Spring + Thymeleaf project?

            Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents