如何解决为什么我的Google Maps API被嵌入但没有显示在HTML页面上?
因此,下面是我正在使用的代码,但是页面上没有显示地图。通常是css的高度/宽度问题,但也已得到纠正。仍然只显示一个空的div,其中没有地图。
我的HTML
<!DOCTYPE html>
<html>
<head>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=MY KEY HERE
&callback=initMap&libraries=places&v=weekly">
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
我的JAVASCRIPT
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"),{
center: { lat: -34.397,lng: 150.644 },zoom: 8
});
}
</script>
CSS
#map {
width: 100%;
height: 500px;
border: 1px solid #000;
}
解决方法
您正在使用回调来初始化地图。将async
添加到Maps API脚本中,然后将其放在<body>
的最后。
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly"></script>
</body>
最后,请确保您使用的是有效的API密钥,并且已在您的项目上启用了结算功能。请参阅Google的get started guide。
通过您的代码工作jsfiddle:https://jsfiddle.net/6sm9vjew/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。