Javascript 谷歌地图没有'；不显示（不加载）

我没有谷歌地图API的经验，所以我希望你能帮助我

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

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

代码笔url，以便更好地解释

html

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" )
});

---

谢谢

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

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

---

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

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

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

我怀疑谷歌是想通过节省浏览器资源，而不是在看不见的元素中绘制地图来提供帮助。通过在显示div时触发resize，它会使Google在现在可见的元素中再次绘制地图

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