在jQuery中调整谷歌地图切换div - 显示问题

Question

我有一个显示谷歌地图的小div。点击按钮我有地图div面板扩展更大 - 简单的jQuery切换。

这样可以正常工作但是一旦切换到更大的尺寸，地图就无法正确显示。我正在使用

google.maps.event.addDomListener(window, 'resize', function()

和

var currCenter = map.getCenter(); 

允许容器调整大小并重新定位地图但由于某种原因它无法正常工作。

它创造了灰色块的问题，而不是居中。

以下是我正在使用的Google地图代码：

    function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        });

        //Get current center
        var currCenter = map.getCenter();

        //Use event listener for resize on window
        google.maps.event.addDomListener(window, 'resize', function() {
        //Set Center
        map.setCenter(getCen);
    });

这是JSFiddle链接，看看到目前为止我得到了什么：https://jsfiddle.net/9ejvmn4q/

Answer 1

如果我在.toggleClass函数运行后触发resize事件，它对我有用（要求是在div调整大小后触发它，所以如果有任何动画或异步延迟，你可以需要考虑到这一点）。

另请注意，要使map resize和setCenter生效，map和currCenter变量必须位于正确的范围内。< / p>

$(document).ready(function() {
    $('.map-toggle').click(function(){
    $('.map').toggleClass('fullsize');
        google.maps.event.trigger(map, 'resize');
        map.setCenter(currCenter);
    });
});

updated fiddle

代码段

$(document).ready(function() {
  $('.map-toggle').click(function() {
    $('.map').toggleClass('fullsize');
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
  });
});

.clear {
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 100%;
}
#content {
  width: 560px;
}
.map-section {} .map {
  width: 140px;
  height: 200px;
  float: right;
}
.map.fullsize {
  width: 100%;
}
.map-toggle {} .student-results-main {
  float: left;
  width: 390px;
  background: #ddd;
  min-height: 300px;
}
.student-results-sidebar {
  float: right;
  width: 140px;
  background: #eee;
  min-height: 300px;
}

<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?callback=initMap" async defer></script>
<script>
  var currCenter;
  var map;

  function initMap() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    });

    //Get current center
    currCenter = map.getCenter();

    //Use event listener for resize on window
    google.maps.event.addDomListener(window, 'resize', function() {
      //Set Center
      map.setCenter(currCenter);
    });
  }
</script>

<div id="content">
  <div class="map-section">
    <div id="map" class="map"></div>
  </div>


  <div class="student-results-main"></div>

  <div class="student-results-sidebar">
    <button class="map-toggle">toggle</button>
  </div>
  <div class="clear"></div>
</div>