时间戳

首页 > 解决方案 > 谷歌地图全屏在特殊情况下不显示

google-maps - 谷歌地图全屏在特殊情况下不显示

问题描述

我有一个显示谷歌地图的网页。它在独立模式下工作正常。不幸的是，当我的其他具有相同域名的网站在 iframe 中调用此页面时，谷歌地图 div 不显示全屏控制按钮。所有其他操作按钮都是可见的，我没有发现其他错误。下面是代码：

var map = new google.maps.Map(
    document.getElementById('map_container'),
    {
        zoom: 5,
        center: center,
        disableDefaultUI: true,
        fullscreenControl: true,   //all other controls works fine
        gestureHandling: 'greedy'
    }
);

编辑：这是用于桌面的。

这是两个 jsfiddle 链接。我在其中创建地图，而其他页面将前一个页面加载到 iframe 中。全屏按钮缺少第二个。

标签： google-maps

解决方案

问题在于 iframe 语法。我没有使用allowfullscreen标志。如果 google map js 检测到它是否没有全屏权限，它不会呈现全屏按钮。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

推荐阅读