如何使用單獨的按鈕觸發Google地圖全屏模式？

Question

基本上我希望能夠添加一個獨立的按鈕來觸發我嵌入到我的網站上的Google Map來進入全屏模式。我還沒有找到答案，所以任何幫助將不勝感激。

目前進入全屏模式的唯一方法是單擊地圖內的全屏按鈕（在右上角）。我想我只需要分配與此按鈕相同的命令，但我不確定這是否適用於地圖外的元素。

在此先感謝！

Answer 1

我不知道你是否解決了這個問題，但我最近遇到了同樣的問題，我想分享一下我做到的。

基本上我所做的是顯示默認的全屏控制，然後使用它的標題在dom中找到它，然後我手動點擊單擊事件。

當我驗證工作，我寫了一個CSS來隱藏按鈕。

這是有點hacky，但它的作品！

function initMap() { 
 
    
 
    var container = $('#container').get(0); 
 
    
 
    var map = new google.maps.Map(container, { 
 
    center: {lat: -39.000, lng: -60.000}, 
 
    zoom: 3, 
 
    fullscreenControl: true 
 
    }); 
 

 
    $('#fullscreen').click(function() { 
 
    \t $('#container div.gm-style button[title="Toggle fullscreen view"]').trigger('click'); 
 
    }); 
 

 
}

#container div.gm-style > button[title="Toggle fullscreen view"] { 
 
    display: none; 
 
}

看到這個fiddle

希望這有助於。

Answer 2

您可以簡單地從地圖的容器中調用requestFullscreen方法。就像這樣：

$('[data-id="map_go_fullscreen"]').click(function(e){ 
    var map = document.querySelector(".gm-style"); 
    map.requestFullscreen(); 
}); 

文檔：https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen