如何在加载后使用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}));
});