Question

我知道有很多关于它的主题，但我无法使其发挥作用。

我的网站上到处都有Google地图，但没有点击按钮时打开的折叠div。它只显示一张灰色地图。

我使用的是简单的地图：

function initMap(){
              geocoder = new google.maps.Geocoder();
              var myLatLng = {lat: 48.8457746, lng: 2.2862185};
              map = new google.maps.Map(document.getElementById('mapConseiller'), {
                zoom: 12,
                center: myLatLng,
                zoomControl: true,
                mapTypeControl: false,
                scaleControl: true,
                streetViewControl: false,
                rotateControl: false
              });

我在这里调用此函数：

<script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&callback=initMap">
            </script>

以下是代码：https://jsfiddle.net/cm64aug0/

Answer 1

我终于找到了解决方案！实际上你必须在div完全可见之后加载地图。

我无法触发事件（＆＃39; shown.bs.collapse＆＃39;）所以我修改了Bootstrap.js以在触发此元素后调用initMap（）函数。

Answer 2

我知道您已经解决了这个问题，但您可以执行以下操作（而不是更改第三方javascript文件...

假设你有一个像这样的折叠div：

<div id="mapConseiller" class="panel-body panel-collapse collapse in">

这应该有效：

$(document).ready(function() {
    $('#mapConseiller').on('shown.bs.collapse', function(e) {
        initMap();
    });
}

这样，只有在折叠的div可见后才会初始化地图。

在Bootstrap折叠div中使用Google Map API

2 个答案: