Question

<html>
<body>
<div>
    <div id="map"></div>
</div>

<script>
function initMap() {
    console.log('here');
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: -34.397, lng: 150.644 }
    });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>

</body>
</html>

在这里，我的代码中没有任何错误。但地图未显示。有什么原因吗？

Answer 1

我尝试了您的代码并显示了一个错误，即Google Maps API错误：InvalidKeyMapError。

加载API的脚本元素缺少必需的身份验证参数。如果您使用的是标准Maps JavaScript API，则必须使用带有效API密钥的key参数。如果您是Premium Plan客户，则必须使用带有客户端ID的客户端参数或带有有效API密钥的密钥参数。

请参阅https://developers.google.com/maps/documentation/javascript/get-api-key

上的API密钥和客户端ID指南

Answer 2

为地图元素指定样式（高度/宽度）

<head>
<style>
   #map {
    height: 400px;
    width: 100%;
   }
</style>

地图未使用Google Maps API显示

2 个答案: