在调整浏览器大小之前不会加载谷歌地图答案

【问题标题】：Google map not loaded until resize the browser在调整浏览器大小之前不会加载谷歌地图
【发布时间】：2016-02-16 13:45:37
【问题描述】：

当我加载网站时，一切都显示得很好，但直到我调整我的网络浏览器大小后，谷歌地图才会加载。我正在使用 jquery mobile。

这里附上我使用的html和脚本

<div id="map-canvas" id="map-canvas" style="width: 100%; height: 600px; padding: 0;">
</div>

<script type="text/javascript">
    shopLAT[1] = 30.197932;
    shopLONG[1] = -97.710452;
</script>


<!-- Google Maps -->

<script type="text/javascript">
map="";
//function loadMap() {  
    var latLng = new google.maps.LatLng(shopLAT[1], shopLONG[1]);
    var mapOptions = {
        center: latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var infowindow = new google.maps.InfoWindow({content: "Marker"});
    var contentString = "<b>Customer:</b> George Adams";
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        html: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.html);
        infowindow.open(map,this);
    });
//}

$(document).ready(function(){
    $("#idmaptab").bind('onClick', function() {
        google.maps.event.trigger(map, 'resize');
        $("#map-canvas").css("height","100%");
    });
});
</script>

【问题讨论】：

先删除jquery mobile js和css文件，看看会发生什么。
@banik 在同时删除 js 和 css 时，地图只是加载但恢复为未加载..。 .
这就是为什么我告诉你删除，不知道确切的问题。我也遇到过这种问题，所以我总是避免使用这个特定的库。我建议你做同样的事情，让用户界面更好使用引导程序。
@banik 但问题是，整个网站都是使用移动 jquery 开发的，所以我不能因为一个错误而改变它，地图正在加载但似乎只有当我手动重新调整大小时浏览器。我认为重新调整大小功能无法正常工作..
请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。

标签： javascript jquery google-maps

【解决方案1】：

尝试以像素为单位设置 map-canvas 的高度和宽度。然后重新加载页面。看看有没有帮助。

在css中：

#map-canvas{
 width: 200px;
 height:200px;
}

【讨论】：