Google地图仅显示在地图div的左上角

Question

使用google documentation我试图在Razor网页中嵌入谷歌地图。

<script>
    function initialize() {           
        var lat = 45.430817;
        var lon = 12.331516;

        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {                
            center: new google.maps.LatLng(lat, lon),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);

    }
    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); 
    });
</script>

但最终结果看起来像这样

Answer 1

这已经发生在我身上了。在这种情况下，您需要在选项卡单击后立即添加调整大小。一些事情，如：

<div id='init_tab' class='tab_item' onclick="google.maps.event.trigger(map, 'resize');">