google-maps - Google Map API 3 - map 未显示完整/调整大小

Question

我正在尝试在网站中获取自定义谷歌地图 API，但问题是 map 未显示完整，仅显示 map 的一部分。

代码如下:

js代码:

$(document).ready(function(){

var map=null; 
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(24.3573, 54.4636),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var currCenter = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(currCenter);
        map.setZoom(14);

        var markerOptions = {
            position: new google.maps.LatLng(24.3573, 54.4636),
            map: map
        };
        var marker = new google.maps.Marker(markerOptions);
        marker.setMap(map);

        var infoWindowOptions = {
            content: '<b>Compnay Name</b><br> Is Here!'
        };
        var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
        infoWindow.open(map, marker);

    };
    google.maps.event.addDomListener(window, 'load', initialize);
});

html代码:

<div class="container">
<h1>Location Map</h1>
<p></p>
 <div id="map-canvas"></div>
</div>

CSS代码:

.container {width: 100%; height: 100%;}
.container #map-canvas {
width: 500px;
height: 250px;
margin: 0;
border: 1px solid rgb(225, 225, 225);}
.map h2{
font-size: 16px;
font-weight: bold;
padding: 20px 0 6px 0;}

请让我知道我做错了什么？

我听说 'google.maps.event.trigger(map, 'resize');'通常可以解决问题，但在我的代码中它似乎不起作用，也许我没有放置在正确的位置..请帮助。

谢谢。

Answer 1

我在使用选项卡 jQuery 插件时遇到了同样的问题。当文档准备好时，我调用initialize()函数($(document).ready(function(){initialize(); }))。本地图选项卡处于事件状态并且问题消失时，我尝试调用initialize()函数。这只是我的经验。祝你好运!

约翰尼