谷歌地图没有完全加载

Question

fiddle here 这样更容易

当我使用 Google API 集成的按钮单击时，我有一个幻灯片 div 来显示谷歌地图。

我的问题是：如果您单击按钮，地图会正确加载。但之后，如果您再次单击按钮隐藏地图并通过单击按钮再次查看地图，则地图无法正确加载。知道如何解决这个问题吗？非常感谢您的帮助。

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

$(document).ready(function() {
  $('.map-triangle').find('div').click(function() {
    $('.map-slide').slideToggle('slow', initialize());
  });


  //google.maps.event.addDomListener(window, 'load', initialize);
});

.map-triangle {
  color: #ffffff;
  text-align: center;
  padding: 0 70px;
  z-index: 1;
}
.map-triangle > div {
  background: green;
  background-size: 100%;
  padding-bottom: 10px;
  padding-top: 4px;
  transition: all 0.5s ease;
}
.map-triangle > div:hover {
  /*cursor: pointer;*/
}
.map-anchor:hover > .map-triangle > div {
  background: red;
  background-size: 100%;
}
.map-slide {
  position: absolute;
  display: none;
  z-index: 1;
}
#map-canvas {
  width: 400px;
  height: 280px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">
  <div class="col-lg-12 col-md-12" style="z-index: 2">
    <a href="#" class="map-anchor">
      <div class="map-triangle">
        <div>
          map
        </div>
      </div>
    </a>

  </div>
  <div class="col-lg-12 col-md-12 map-slide">
    <div id="map-canvas"></div>
  </div>
</div>

PS：sn-p 也可以工作

Answer 1

在您的情况下，您需要在滑动切换后刷新var map。如果没有，您将无法调整地图的大小以进行处置。因此，要解决您需要在 slideToggle 之后放置 var map = new google.maps.Map(mapCanvas, mapOptions); 的问题。

请检查一下。希望对你有帮助:)

$(document).ready(function() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  $('.map-triangle').find('div').click(function() {
    $('.map-slide').slideToggle('slow');
    var map = new google.maps.Map(mapCanvas, mapOptions);
  });

});

.map-triangle {
  color: #ffffff;
  text-align: center;
  padding: 0 70px;
  z-index: 1;
}
.map-triangle > div {
  background: green;
  background-size: 100%;
  padding-bottom: 10px;
  padding-top: 4px;
  transition: all 0.5s ease;
}
.map-triangle > div:hover {
  /*cursor: pointer;*/
}
.map-anchor:hover > .map-triangle > div {
  background: red;
  background-size: 100%;
}
.map-slide {
  position: absolute;
  display: none;
  z-index: 1;
}
#map-canvas {
  width: 400px;
  height: 280px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">
  <div class="col-lg-12 col-md-12" style="z-index: 2">
    <a href="#" class="map-anchor">
      <div class="map-triangle">
        <div>
          map
        </div>
      </div>
    </a>

  </div>
  <div class="col-lg-12 col-md-12 map-slide">
    <div id="map-canvas"></div>
  </div>
</div>