如何使用单独的按钮触发Google地图全屏模式？

Question

基本上，我希望能够添加一个独立按钮来触发我嵌入到网站中的Google Map进入全屏模式。到目前为止，我还没有运气找到答案，因此，我们将不胜感激。

当前，进入全屏模式的唯一方法是单击地图内的全屏按钮（位于右上角）。我想我只需要分配该按钮具有的相同命令，尽管我不确定这是否适用于地图之外的元素。

提前致谢！

Answer 1

我不知道您是否解决了这个问题，但是我最近也遇到了同样的问题，我想分享我的做法。

基本上，我要做的是显示默认的全屏控件，然后使用其标题在dom中找到它，然后手动触发click事件。

当我验证该方法可行时，我编写了一个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() {
  	$('#container div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
  });

}

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

看到这个小提琴

希望能有所帮助。