调整大小后，Google地图不会更新

Question

Fiddle，代码将说明一切。我只想在左侧看一个可以切换的面板。因此，如果我点击它将滑出，如果我再次点击它将重新滑入。我能够很容易地调整其右侧显示的谷歌地图的大小，但是，每当面板滑出时，地图的“新部分”仍然存在卸载。我尝试使用文档中的建议：

var toggle = true;

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  $('#infoWindow').click(function() {
    if (toggle) {
      $('#infoWindow').animate({
        left: -160
      });
      $('#map_div').animate({
        width: $('#map_div').width() + 160,
        left: 40
      });
      google.maps.event.trigger(map, 'resize');
    } else {
      $('#infoWindow').animate({
        left: 0
      })
      $('#map_div').animate({
        width: $('#map_div').width() - 160,
        left: 200
      });
    }
    toggle = !toggle;
  });
});

但我觉得我错过了什么。

为了更好地理解，无论何时单击面板以减少它，您都会注意到地图的最右侧未加载。我怎样才能解决这个问题 ？我做错了什么？

代码段（来自链接小提琴）：

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}
#map_div {
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  width: calc(100% - 200px);
}
#infoWindow {
  z-index: 10;
  top: 0px;
  position: absolute;
  width: 200px;
  bottom: 0px;
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="infoWindow"></div>
<div id="map_div" style="height: 400px;"></div>

.vertical

Answer 1

你需要在完成动画后触发'resize'。您可以使用.animate .complete函数（documentation）：

  

.animate（properties [，duration] [，easing] [，complete]）

<强>定义：

  

完成|输入：Function（）

     

动画完成后调用的函数，每个匹配元素调用一次。

  $('#map_div').animate({
    width: $('#map_div').width() + 160,
    left: 40
  }, function() {
    google.maps.event.trigger(map, 'resize');
  });

和

  $('#map_div').animate({
    width: $('#map_div').width() - 160,
    left: 200
  }, function() {
    google.maps.event.trigger(map, 'resize');
  });

proof of concept fiddle

代码段

var toggle = true;

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  $('#infoWindow').click(function() {
    if (toggle) {
      $('#infoWindow').animate({
        left: -160
      });
      $('#map_div').animate({
        width: $('#map_div').width() + 160,
        left: 40
      }, function() {
        google.maps.event.trigger(map, 'resize');
      });
    } else {
      $('#infoWindow').animate({
        left: 0
      })
      $('#map_div').animate({
        width: $('#map_div').width() - 160,
        left: 200
      }, function() {
        google.maps.event.trigger(map, 'resize');
      });
    }
    toggle = !toggle;
  });
});

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}
#map_div {
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  width: calc(100% - 200px);
}
#infoWindow {
  z-index: 10;
  top: 0px;
  position: absolute;
  width: 200px;
  bottom: 0px;
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="infoWindow"></div>
<div id="map_div" style="height: 400px;"></div>