使用javascript标签调整大小后的中心标记

Question

我在将网站上的Google地图的标记居中时遇到问题。

该地图位于javascript标签中，并在激活标签后触发调整大小，以便重新加载并显示，因此：

<li>
                <a href="#" class="button tablinks" onclick="openTab(event, 'contact');resetMap();"><span class="topnavlinks">Contact</span></a>
            </li>

function resetMap() {
google.maps.event.trigger(map, 'resize');
}

它会重置为大小，但是就像我在很多地方阅读过一样，它不会重置以使标记居中。 我尝试了各种设法找到的答案，但仍然找不到解决该问题的方法！

我的标签代码：

<script><!-- tabs -->
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  document.getElementById("defaultOpen").click();
</script>

还有我的地图代码（只是没有样式）：

function initMap() {
  var theoneway = {lat: 9.700082, lng: 100.02203};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: theoneway
  });
  var marker = new google.maps.Marker({
    position: theoneway,
    map: map
  });
}

最后是html：

<div class="container-fluid">
    <div id="map" style="height:500px;"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=(mykeyishere)&callback=initMap"
    async defer></script>
</div>

可以在这里找到工作版本： http : //theoneway.asia/bench/

我希望这是足够的信息，非常感谢您的帮助和建议！

Answer 1

我已通过我的地图js文件中的listen事件修复了此问题，以防其他人遇到相同的问题：

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});