谷歌地图全屏与bootstrap模式

Question

我有谷歌地图。当我点击一个标记时，我会显示一个带有style =“z-index：999999999999999999999999999”的bootstrap模态。这里没问题。但是，当我单击全屏按钮时，模式不再显示。它只能在正常模式下工作。有任何建议如何解决这个问题？

要查看示例，请参阅：http://jsfiddle.net/segato/e8w4wmh6/

var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
var mapProp = {
    center: myCenter,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
    position: myCenter,
});
marker.setMap(map);

google.maps.event.addListener(marker, 'click', function () {

            $('#myModal').modal('show'); 
        });
}

google.maps.event.addDomListener(window, 'load', initialize);

单击标记。然后单击全屏图标，然后单击标记。

Answer 1

关键是全屏模式使用fullscreen API，因此全屏元素之外的任何内容（在本例中为地图DIV）都保持向后。

解决方法可以是将模态元素附加到map div，例如利用custom controls API。

 map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));

见工作fiddle。

注：我已禁用模态背景，因为在地图中它出现了错误的z位置，来自模态的顶部。如果您需要背景，我认为解决这个问题并不困难。