谷歌地图不出现（不加载）答案

【问题标题】：Google Map doesn't appear (doesn't load)谷歌地图不出现（不加载）
【发布时间】：2017-07-07 17:05:57
【问题描述】：

我没有使用 google map API 的经验，所以希望你能帮助我。

问题是每当我点击显示按钮时，地图的宽度就会出现，但它没有加载，我根本看不到地图。

但如果我在开发者工具中打开顾问，地图会正常加载！

codepen url 以获得更好的解释 https://codepen.io/ahmadz12/pen/QdRQbE

html

<div id="map-canvas" class='hide'></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<a id='show'>show</a>

css

#map-canvas{
  height: 500px;
  width: 500px;
  border: 3px solid black;
}
.hide{
  display:none;
}

javascript

if (document.getElementById('map-canvas')){

    // Coordinates to center the map
    var myLatlng = new google.maps.LatLng(52.525595,13.393085);

    // Other options for the map, pretty much selfexplanatory
    var mapOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Attach a map to the DOM Element, with the defined settings
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

}
$('#show').click(function(){
 $('#map-canvas').removeClass( "hide" )
});

谢谢

【问题讨论】：

标签： javascript jquery api google-maps

【解决方案1】：

当您将 Google 地图加载到隐藏的 div 中然后显示该 div 时，您需要告诉 Google 重新绘制地图：

$('#show').click(function(){
    $('#map-canvas').removeClass( "hide" );
    google.maps.event.trigger(map, 'resize');
});

我怀疑 Google 试图通过节省浏览器资源来提供帮助，而不是在无法看到的元素中绘制地图。通过在显示 div 时触发调整大小，它会导致 Google 在现在可见的元素中再次绘制地图。

【讨论】：