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

这是我的答案对我有用.