Question

当我加载网站时，一切都显示正常，但在我调整网络浏览器大小之前，谷歌地图未加载。我正在使用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>

Answer 1

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

在css中：

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

在调整浏览器大小之前，Google地图未加载

1 个答案: