谷歌地图显示什么，直到我最小化屏幕

Question

在我的网站上，我有一个谷歌地图，但它没有显示我想要的东西。当它加载时，它会显示这一点。然后我最小化我的屏幕，它显示地图。

这是我的代码：

<div id="view1"> 
    <?php
        $location = get_field('locatie_beschrijving');
        if( ! empty($location) ):
    ?>
    <div id="map" style="width: 800px; height:300px "></div>
    <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
    <script type="text/javascript">
      //<![CDATA[
        function load() {
        var lat = <?php echo $location['lat']; ?>;
        var lng = <?php echo $location['lng']; ?>;
    // coordinates to latLng
        var latlng = new google.maps.LatLng(lat, lng);
    // map Options
        var myOptions = {
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
       };
    //draw a map
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
       });
    }
    // call the function
       load();
    //]]>
    </script>
</div>  

有人知道怎么了吗？

Answer 1

关键是，初始化时您的映射是隐藏的，因此，一旦显示选项卡，您需要触发调整大小事件。

google.maps.event.trigger(map, "resize");

当div改变大小时，开发人员应该在映射上触发此事件

引导选项卡

此库公开事件：

事件

显示新选项卡时，事件按以下顺序启动：

hide.bs.tab（在当前活动选项卡上）

show.bs.tab（在待显示的选项卡上）

hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）

showed.bs.tab（在刚刚显示的新活动选项卡上，与show.bs.tab事件相同）

这样，你就可以完全控制你的标签会发生什么。你知道什么时候显示、隐藏等

所以你可以使用类似的东西（与jQuery）：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // Trigger map resize when tab is shown
  google.maps.event.trigger(map, "resize");
});

当选项卡显示时，这将触发调整大小事件

确保map对象可用于放置此代码的位置。

Answer 2

使用以下编码

google.maps.event.addDomListener(window, "resize", resizingMap());
function resizingMap() {
 if(typeof map =="undefined") return;
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
 }