google-maps - 谷歌地图在加载时明显调整大小

Question

我正在使用下面的代码在 div 中显示谷歌地图。当页面加载时，地图似乎会在稳定之前反弹。有没有办法阻止这种行为？页面在这里。

function initialize() {

    myform.search.focus();

    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(41.850033, -87.6500523);

    var mapOptions = {

       zoom: 2,

       center: latlng,

       mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

}

Answer 1

以下对我有用：

最初将可见性样式设置#map_canvas为hidden

然后等待tilesloaded-event 显示地图（延迟很短）：

google.maps.event
 .addListenerOnce(map,
                  'tilesloaded',
                   function(){var that=this;
                              setTimeout(function(){
                                  that.getDiv().style.visibility='visible'},
                                  100);
                   });