如何创建一个全屏显示按钮来将我的谷歌地图页面切换为全屏？ [英] How do I create a show full screen button to toggle my google maps page to be full screen?

问题描述

大家好，我在我的页面上部署了一个谷歌地图，我想创建一个切换按钮来切换全屏和普通大小之间的地图。因此，当你点击它时，地图会扩展到填满整个浏览器屏幕，然后再次单击它，它会在页面上恢复到原始大小。我怎么做到这一点？

解决方案

这是一个jQuery实现。 （＃map）。toggleClass（fullscreen）
}）;

在CSS中：

  #map {
 width：400px; 
 height：200px; 
} 
 
＃map.fullscreen {
 position：fixed; 
宽度：100％; 
身高：100％; 
} 
  

未经测试，但应该遵循这一点。

Hi guys I have a google map integrated on part of my page and I would like to create a toggle button to toggle the map between full screen and normal size. So when you click on it - the map extends to fill the whole browser screen and click on it again it is restored to its original size on the page. How would I do it?

解决方案

Here's a jQuery implementation.

$("#map_toggler").click(function() {
  $("#map").toggleClass("fullscreen")
});

In the CSS:

#map {
  width: 400px;
  height: 200px;
}

#map.fullscreen {
  position: fixed;
  width:100%;
  height: 100%;
}

Untested, but something along the lines of that should work.

这篇关于如何创建一个全屏显示按钮来将我的谷歌地图页面切换为全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！