Google Map API 3 - 地图未显示完整/调整大小答案

【问题标题】：Google Map API 3 - Map not showing full / resizeGoogle Map API 3 - 地图未显示完整/调整大小
【发布时间】：2013-08-23 23:20:36
【问题描述】：

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

给出下面的代码：

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');'通常可以解决问题，但在我的代码中它似乎不起作用，也许我没有放在正确的地方..请帮助。

谢谢。

【问题讨论】：

Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag的可能重复
试着把你的google.maps.event.trigger(map, 'resize') 放在你最后一个动作的后面，你正在处理地图。也许在google.maps.event.addDomListener(window, 'load', initialize);之后
您发布的代码对我有用，live example
Bipin，告诉我你的页面网址。我们会检查的。
地图作为独立的 div 可以正常工作，我拥有的是隐藏的 div（单击位置地图链接时页面会滑动）

标签： google-maps google-maps-api-3

【解决方案1】：

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

强尼

【讨论】：

【解决方案2】：

@Bipin：我有解决该错误的解决方案

在你的 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);

希望解决方案可以提供帮助。

【讨论】：

我只需调用“google.maps.event.trigger(m, 'resize');”就可以让它工作。没有其他行。

【解决方案3】：

我遇到了同样的问题，但在我的情况下，地图应该弹出。我通过使用setTimeout javascript函数等到弹出动画完成来克服它，然后我调用了地图初始化函数。我希望这会有所帮助。

此外，您的地图看起来有些失真。检查此问题以获取解决方案： Google Maps api v3 tools: visual distortions?

【讨论】：