全屏地圖顯示不正確

Question

我想讓地圖全屏打開。我已經試過這樣：

<div class="b-firm-map-content" id="map"></div> 
<a href="#" onclick="test2();return false;" >full screen</a> 

    function test2(){ 
    var width = $(window).width()-3; 
    var height = $(window).height(); 


    $('#map').css({ 
     'width': width, 
     'height': height - 40 , 
     'position': 'absolute ', 
     'z-index' : '900' 
    }); 

} 

，但它會導致：

• http://pixs.ru/showimage/Snimokpng_5811285_6065704.png
• http://pixs.ru/showimage/Snimok1png_4265065_6065745.png

我的地圖顯示不全。

Answer 1

更新您的測試2（）函數是這樣的：

function test2(){ 
    var width = $(window).width()-3; 
    var height = $(window).height(); 

    $('#map').css({ 
    'width': width, 
    'height': height - 40 , 
    'position': 'absolute ', 
    'z-index' : '900' 
    }); 

    google.maps.event.trigger(your_map, 'resize'); 
} 

更換your_map與持有地圖對象變量名。

這是API不知道何時以編程方式調整地圖容器的事實的解決方案。從文檔：

當div更改大小時，開發人員應該在地圖上觸發此事件：google.maps.event.trigger（map，'resize'）。

Answer 2

當您的地圖顯示時（在您設置了顯示div的大小後）觸發google.maps.Map調整大小事件。