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

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
        };

Answer 1

DaveBurns answer worked with some modifications because I don't use jQuery. Also I needed to use clientHeight and clientWidth

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

function onBoundsChanged() {
  if (
    map.getDiv().firstChild.clientHeight === window.innerHeight &&
    map.getDiv().firstChild.clientWidth === window.innerWidth
  ) {
    console.log('FULL SCREEN');
  } else {
    console.log('NOT FULL SCREEN');
  }
}

Answer 2

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 ) {