javascript - google map api 调整 map 大小

Question

我的网站上有一张完整的谷歌地图，点击一个标记，左侧的面板会弹出。问题是我的 map 大小仍然相同，其中面板覆盖了一半。

我有一个代码可以让所选标记居中，并在左侧面板弹出后调整 map 大小以适应新窗口，但它似乎不起作用:

function initialize() {

    var center = new google.maps.LatLng(XXXXXX, XXXXXXX);

    var map = new google.maps.Map(document
    .getElementById('MAP'), {
        zoom : 13,
        minZoom: 5,
        center : center,
        styles :　googleStyle,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    var infoBubble = new InfoBubble({
        map: map,
        padding: 10,
        arrowPosition: 30,
        arrowSize: 10,
        backgroundColor: 'white',
        borderColor: 'white',
        borderRadius: 4,
        arrowStyle: 2,
        maxWidth: 250,
        hideCloseButton: true,
    });

    Some more codes related to marker...

    google.maps.event.addListener(markers[i], 'click', function(e) {

        Some more codes related to marker...

        // THIS I THINK IS THE ONE TO RESIZE THE MAP
        var latLngAdjust = new google.maps.LatLng(csCoordinateLat, csCoordinateLng + 0.00018);
        layoutV.layout.open('west');   // THE LAYOUT THAT WILL POP OUT

        window.setTimeout(function() {
            map.setZoom(17);
            map.panTo(latLngAdjust);  // THIS I ASSUME TO RESIZE THE MAP AND CENTER THE MARKER CHOSEN
        }, 300);
    }
}

有人知道为什么 map 不调整大小，而是面板只是放在 map 的顶部吗？

Answer 1

点击后添加

var resize=document.getElementId('map').style;
resize.width = '50%';//put your desire width
//other option here