谷歌地图没有完全加载

Question

在这里小提琴，所以更容易

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

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

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：片段也可以工作

Answer 1

在您的情况下，您需要在滑动切换后刷新var map。否则，您将无法将地图大小调整为处置。因此，要解决此问题，您需要在幻灯片切换后放置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>