Google Maps API V3上的灰盒子

Question

似乎Google Maps API有一个更新,如果没有设置宽度和高度的像素值,那么它只会呈现一个灰色框.我遇到的问题是我需要一个全宽度的地图.

地图会渲染,如果您将地图拖动到右侧,则可以看到地图.

我尝试将此添加到事件中google.maps.event.trigger(map, "resize");它没有帮助.

这是我的标记

<div class="map-holder">
      <div id="google-map"></div>
</div>    

这是我的js

var map;

function initialize() {
    var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(XX.XXXXX, XX.XXXXX),
        disableDefaultUI: true,
        draggable: true,
        scrollwheel: false,
        scaleControl: false,
        zoomControl: false
    };

    map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(XX.XXXXX, XX.XXXXX),
        map: map,
        title: 'Some place',
        visible: true,
        place: 'Some place'
    });
}

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

google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

Answer 1

我有同样的问题,这就是为什么我有灰色框而没有地图.我有2个标签 - 一个是可见的,一个是隐藏的 - 一个地图在可见范围内另一个地图在隐藏内 - 我有完全相同的最小代码来初始化除div之外的地图.

我将隐藏的地图div放在可见区域内并运行 - 它的工作和渲染就像可见区域一样.

我的故事的寓意是 - 如果它位于隐藏的div中 - 它将无法正确初始化 - 可能是由于DOM没有使某些事物可以访问 display:none;

我只是希望它有所帮助 - 这不是我第一次碰到这个,所以我想我会让我的代码兄弟知道这笔交易!