如何创建节目全屏按钮以将我的Google地图页面切换为全屏？

Question

嗨,大家好我在我的页面的一部分上集成了谷歌地图,我想创建一个切换按钮,在全屏和正常大小之间切换地图.因此,当您单击它时 - 地图会扩展以填充整个浏览器屏幕并再次单击它,它将恢复到页面上的原始大小.我该怎么办？

Answer 1

这是一个jQuery实现.

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

在CSS中:

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

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

未经测试,但其中的某些内容应该有效.

Answer 2

如果你的页面上有地图,你需要做的就是写一些javascript来调整持有地图的DIV的大小.我没有实现一个调整DIV大小以填充浏览器的示例,但是这里有一个从javascript切换map div的大小(我使用mooTools来设置元素上的style.width,但你可以使用任何你喜欢操纵DOM).