Google地图标记在加载时位于底部

Question

我正在使用bootstrap进行布局，我试图将我的地图居中到标记，但问题是标记显示在地图容器的底部。如果我稍微调整窗口的大小，那么它就会自动居中并正常工作。

我的标记

<div id="gMap">
  <div id="map-canvas"></div>
</div><!--gMap-->

CSS

#map-canvas {
 position: relative;
 padding-bottom: 70%; 

}

#map-canvas iframe {
 width: 100% !important;
 height: 100% !important;
}

JS

var respMap;
var mapCanvas = document.getElementById('map-canvas');

function mymapini() {
 var mapPos = new google.maps.LatLng(43.724243, -79.634353); //Set the coordinates
 var mapOpts = {
 zoom: 16, 
 disableDefaultUI: true,
 center: mapPos, 
 mapTypeId: google.maps.MapTypeId.ROADMAP
};

respMap = new google.maps.Map(mapCanvas,
mapOpts);

var mapMarker = new google.maps.Marker({
 position: mapPos,
 map: respMap,
 title: 'Test marker'
 });


 google.maps.event.addListener(respMap, 'idle', function() {
  window.setTimeout(function() {
 respMap.panTo(mapMarker.getPosition());
 }, 250);    
});

}

if(mapCanvas != null){

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


}   

Answer 1

为什么不使用：

而不是使用空闲事件

respMap.panTo(mapMarker.getPosition());

在onload中？

window.onload = function() {
    respMap.panTo(mapMarker.getPosition());
}

或者只是这样做：

var mapMarker = new google.maps.Marker({
 position: mapPos,
 map: respMap,
 title: 'Test marker'
});

respMap.panTo(mapMarker.getPosition());