我试图以Google中心为中心,在自己的网站上显示Google地图。我正在使用JavaScript Google Maps API密钥进行此操作。我通过下载平台API检查器检查了密钥,它说成功了。我在地图上收到错误消息:“此页面无法成功加载google地图。”我在下面做什么错了?谢谢!
personInfo.html
<head>
<meta charset="UTF-8">
<title> Covid 19 Patient Map </title>
<style>
#map{
height: 400px;
width: 50%;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href="http://127.0.0.1:5000"/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Lives at: </label>
<p id="address"></p>
</div>
<div class="block">
<label>Covid status?: </label>
<p id="covidPos"></p>
</div>
<h1> Covid 19 Patient Map </h1>
<div id="map"></div>
<script>
var personInfoList = JSON.parse(sessionStorage.getItem("newList1"));
for(let item of personInfoList) {
document.getElementById("displayName").innerHTML = item[0] + " " + item[1];
document.getElementById("address").innerHTML = item[2];
document.getElementById("covidPos").innerHTML = item[3];
}
function initMap(){
var opts = {zoom: 10, center: {lat: 34.0522, lng: 118.2437}
}
var map = new google.maps.Map(document.getElementById('map'),opts);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzRLuKxf5Xa4oTwp5o_PErnB8u88br3MU&callback=initMap">
</script>
</body>
</html>