谷歌地图不会显示Chrome和Firefox中的所有图块，Safari也可以

Question

只渲染一个左上方的图块。正如许多地方所建议的那样，添加google.maps.event.trigger(map, 'resize');但仍然没有效果......

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    mapTypeId: 'roadmap',
    disableDefaultUI: true,
    zoomControl: true
};


// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// Multiple Markers
var markers = [
                ["Noosa", -26.413975, 153.047836],
                ["Caloundra", -26.802513, 153.125107],
                ["Strathpine", -27.306915, 152.992477],
                ["Carindale", -27.502998, 153.101624],
                ["Garden City", -27.563034, 153.082489]    
            ];
$( "#mark1" ).click(function() {            
    map.setZoom(14);
    map.setCenter(new google.maps.LatLng(-26.413975, 153.047836));
});
$( "#mark2" ).click(function() {            
    map.setZoom(14);
    map.setCenter(new google.maps.LatLng(-26.802513, 153.125107));
});
$( "#mark5" ).click(function() {            
    map.setZoom(14);
    map.setCenter(new google.maps.LatLng(-27.306915, 152.992477));
});
$( "#mark3" ).click(function() {            
    map.setZoom(14);
    map.setCenter(new google.maps.LatLng(-27.502998, 153.101624));
});
$( "#mark4" ).click(function() {            
    map.setZoom(14);
    map.setCenter(new google.maps.LatLng(-27.563034, 153.082489));
});


// Display multiple markers on a map
var boundsListener = google.maps.event.addListener((map), 'bounds_changed',     function(event) {
    this.setZoom(8);
    google.maps.event.removeListener(boundsListener);
    google.maps.event.trigger(map, 'resize');
});

// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);

    var marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            map.setZoom(14);
            map.setCenter(marker.getPosition());
            google.maps.event.trigger(map, 'resize');
        }
    })(marker, i));
}
map.fitBounds(bounds);
google.maps.event.trigger(map, 'resize');
// 
}

map-canvas从bootstrap列类继承默认样式

<div class="row"><div id="map-canvas" class="col-md-12"></div></div>

我尝试在css中手动展开它：
    #map-canvas {         宽度：100％;         身高：300px;     }