如何在加載后使用JavaScript調整Google地圖的大小？

Question

我有一個'mapwrap'div設置為400px x 400px，在里面我有一個Google'地圖'設置為100％x 100％。 所以地圖加載為400 x 400px，然后使用JavaScript我將'mapwrap'調整為屏幕的100％x 100％ - 谷歌地圖按照我的預期調整到整個屏幕，但是瓷磚開始在右邊緣消失之前消失頁。

我可以調用一個簡單的函數來使Google地圖重新調整到更大尺寸的“mapwrap”div嗎？

Answer 1

對於Google Maps v3，您需要以不同方式觸發調整大小事件：

google.maps.event.trigger(map, "resize");

請參閱resize事件的文檔（您需要搜索“調整大小”一詞）： http ： //code.google.com/apis/maps/documentation/v3/reference.html#event

---

更新

這個答案已經存在很長時間了，所以一個小小的演示可能是值得的，雖然它使用jQuery，但是沒有必要這樣做。

 $(function() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; var map = new google.maps.Map($("#map-canvas")[0], mapOptions); // listen for the window resize event & trigger Google Maps to update too $(window).resize(function() { // (the 'map' here is the result of the created 'var map = ...' above) google.maps.event.trigger(map, "resize"); }); }); 

 html, body { height: 100%; } #map-canvas { min-width: 200px; width: 50%; min-height: 200px; height: 80%; border: 1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script> Google Maps resize demo <div id="map-canvas"></div> 

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本，resize事件不再是Map類的一部分。

文件說明

調整地圖大小后，地圖中心將固定

• 全屏控制現在保留了中心。

• 不再需要手動觸發resize事件。

來源： https ： //developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 從版本3.32開始沒有任何影響

Answer 2

如果您使用的是Google地圖v2，請在調整容器大小后調用地圖上的checkResize() 。 鏈接

UPDATE

Google Maps JavaScript API v2於2011年被棄用。現在不再可用。

Answer 3

熱門答案google.maps.event.trigger(map, "resize"); 不適合我一個人。

這是一個技巧，確保頁面已加載，並且地圖也已加載。 通過設置偵聽器並偵聽映射的空閑狀態，您可以調用事件觸發器來調整大小。

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
}); 

這是我的答案對我有用。

Answer 4

Wolfgang Pichler的地圖提供給

在可拖動且可調整大小的div元素中加載地圖。

Answer 5

這是最好的，它將完成工作。 它會重新調整地圖大小。 無需再檢查元素以重新調整地圖大小。 它的作用是自動觸發重新調整大小的事件。

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

Answer 6

首先，感謝指導我並解決這個問題。 我找到了一種方法來解決您的討論中的問題。 是的，讓我們來點。 問題是我在CakePHP3中使用GoogleMapHelper v3幫助器。 當我試圖打開bootstrap模式彈出窗口時，我對地圖上的灰色框問題感到震驚。 它已經延長了2天。 最后我解決了這個問題。

我們需要更新GoogleMapHelper來解決問題

需要在setCenterMap函數中添加以下腳本

google.maps.event.trigger({$id}, \"resize\");

並且需要在JavaScript中包含以下代碼

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});