Google maps 谷歌地图API 3-地图未显示完整/调整大小

我试图在一个网站上获得一个定制的谷歌地图API，但问题是地图没有显示完整，只显示了地图的一部分。

代码如下所示：

$(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);
});

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

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

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

请让我知道我做错了什么

我听说过“google.maps.event.trigger（map，'resize'）；”通常是这样的，但在我的代码中它似乎不起作用，也许我不在正确的位置。。请帮忙

---

谢谢。

我在使用tab jQuery插件时遇到了同样的问题。我在文档就绪时调用initialize（）函数（$（document）.ready（function（）{initialize（）；}））。 当映射选项卡处于活动状态且问题消失时，我尝试调用initialize（）函数。这只是我的经验。 祝你好运

---

约翰尼：我有办法帮你解决这个错误

在Js代码中添加下面的函数

 function resizeMap(m) {
        x = m.getZoom();
        c = m.getCenter();
        google.maps.event.trigger(m, 'resize');
        m.setZoom(x);
        m.setCenter(c);
    };

//m是“地图”

之后再按此功能

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

---

希望解决方案能有所帮助。

我也有同样的问题，但在我的情况下，地图应该会弹出。 通过使用

setTimeout

javascript函数等待弹出动画完成，然后调用map初始化函数，我克服了这个问题。我希望这有帮助

此外，您的地图看起来扭曲了。检查此问题以获取解决方案：

---

可能重复的尝试将您的

google.maps.event.trigger（映射，'resize'）

放在您的上一个操作后面，您正在使用映射。可能在

google.maps.event.addDomListener（窗口“加载”，初始化）之后你发布的代码对我有用，Bipin，告诉我你的页面url。我们将检查它。地图作为独立的div运行良好，我有一个隐藏的div（单击位置地图链接时页面幻灯片），我可以通过调用“google.maps.event.trigger（m，'resize'）；”而不调用其他行使其工作。