Google地图无法正确加载

Question

我将带领图像：

这是我创建嵌入API的谷歌地图时返回的内容。

我的JS

var map;

    function initMap(){
        map = new google.maps.Map(document.getElementById('maphere'), {
          center: {lat: -81.378373, lng: 28.536156},
          zoom: 18
        });
    }

我的HTML：

<div id="hideMapOverflow">
     <div id="maphere" style="height:100%"></div>
</div>

随之而来的CSS：

#hideMapOverflow{
    overflow:hidden;
    height:500px;
    width:100%;
}
#maphere{
    height:100%;
}

地图组件似乎加载，但地图本身不是。我错过了什么吗？

Answer 1

你的经纬度是倒退的。

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('maphere'), {
    center: {
      lng: -81.378373,
      lat: 28.536156
    },
    zoom: 18
  });
}
google.maps.event.addDomListener(window, "load", initMap);

#hideMapOverflow {
  overflow: hidden;
  height: 500px;
  width: 100%;
}
#maphere {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="hideMapOverflow">
  <div id="maphere" style="height:100%"></div>
</div>