Javascript:Google Maps API:如果地图加载在隐藏容器中，则为空白地图

Javascript: Google Maps API: Blank Map if map loads in a hidden container

本文关键字：地图 空白 Maps Google API 如果 Javascript 加载 隐藏      更新时间：2023-09-26

这似乎是一个常见的问题，但最新的谷歌地图API是否可以在最初隐藏的容器中显示地图？

目前，当容器显示为块时，我有地图在工作

<div class="map-container">
    <div id="map"></div>
</div>

如果.map-container最初在CSS上有display:none;，并且我使用Javascript来"显示"容器，那么我就会看到地图应该在哪里，有一个空白的背景和谷歌标志。

有人找到什么好的解决方案吗？我唯一能想到的尝试是最初加载它显示，然后用javascript在页面加载时隐藏它。。。我显然不想这样做，所以如果有其他方法，那就太好了！

显示div后，在地图上触发调整大小事件。您还需要设置地图的中心（当地图没有大小时，中心是分区的左上角…）

概念验证小提琴

代码片段：

var geocoder;
var map;
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(
    document.getElementById("map"), mapOptions);
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map
  });
  google.maps.event.addDomListener(document.getElementById('dispmap'), 'click', function() {
    var elem = document.getElementById("map");
    console.log("before:" + elem.style.display);
    elem.style.display = (elem.style.display === 'none' ||
      elem.style.display === '') ? 'block' : 'none';
    console.log("after:" + elem.style.display);
    google.maps.event.trigger(map, 'resize');
    map.setCenter(mapOptions.center);
  })
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map,
.map-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  display: none;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="dispmap" type="button" value="toggle" />
<div class="map-container">
  <div id="map">
    <div>
    </div>

相关文章：