如何正确调用javascript google map api函数？答案

【问题标题】：How to call javascript google map api function correctly?如何正确调用javascript google map api函数？
【发布时间】：2020-08-16 19:23:52
【问题描述】：

我正在尝试在我的网站上显示以洛杉矶为中心的谷歌地图。我正在使用 javascript 谷歌地图 api 密钥这样做。我通过下载平台API检查器检查了密钥，它说它是成功的。我在地图上收到“此页面无法成功加载谷歌地图”的错误消息。我在下面做错了什么？谢谢！

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>

【问题讨论】：

您确定要在此处发布您的 API 密钥吗？
this page can't load google maps successfully. - 您的 API 密钥错误，或者您尝试在未注册的域上使用它

标签： javascript html google-maps google-maps-api-3 google-api

【解决方案1】：

我发现你目前使用的 api key 只是用于开发目的的 api key。正如文档所说here。

您必须创建自己的 API 密钥 here。

一点建议不要像这样（前端）放置您的 api 密钥，而不是从后端检索密钥（您可能想要使用 .env 文件）。

【讨论】：

我试试你的建议。我最终打开了 javascript 错误浏览器，它告诉我启用计费，哪个临时解决了问题。但我会再次考虑按照您所说的后端方式进行操作
不要把你的 api 密钥那样（前端）它还能如何工作？这就是在特定域上启用 API 密钥的原因 - 这样您就可以随心所欲地发布 API 密钥，它只会在您允许它的域上工作
另外，您怎么知道这是一个仅用于开发目的的密钥，而不是 OP 拥有的密钥？很想知道你是怎么知道的