Google Maps API v3 - 地図がフルスクリーンモードに変更されたときを検出する方法は？

Question

ユーザーがデフォルトの全画面モードボタンをクリックしたときに検出する方法はありますか？

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

Answer 1

をあなたはfullscreenchangeイベント持っているHTML5 Fullscreen APIを使用することができます：、フルスクリーンモードが正常に従事している場合は、」

を が含まれている文書を

これらは、私が使用しているマップのオプションですfullscreenchangeイベントを受信します。 フルスクリーンモードが終了すると、ドキュメントは再び フルスクリーンチェンジイベントを受信します。

「瞬間のためには、すべてのブラウザは、APIの接頭辞バージョンを使用しているではない」ことに注意してください。あなたは、実際のクリックイベントやフルスクリーンの間だけの状態の変化を検出する場合

ので、例えば、MozillaのFirefoxでのイベントハンドラは、私はわからないんだけど、この

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

Answer 2

ようになります。そうではありません。私は後者をする必要があった。あなたが知る必要があるのは、a）マップサイズが変わると、マップはbounds_changedイベントを発生させ、b）イベントハンドラ内では、マップdivのサイズと画面全体のサイズを比較する必要があります。

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

getDiv（）は、Map（）コンストラクタに渡した独自のdivを返します。そのdivはフルスクリーンでサイズが変更されません - その子はそれを行います。だから私は地図のdivの子を取得している部分は正しいが、少し扱いに​​くいです。また、このようなことがより簡単に書き換えることができ、それが動作しますが、Googleは地図のdivのクラス名を変更した場合、これは将来的に破ることができます：

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

Answer 3

それは私のために働いているこのソリューションを：

/** 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!'); 
    } 
});