如何正确调用 javascript google map api ZC1C425268E68385D1AB5074C17A94F14？

Question

I'm trying to get google maps to show up on my site with Los Angeles being at its center.我正试图让谷歌地图出现在我的网站上，以洛杉矶为中心。 I am doing so with a javascript google maps api key.我正在使用 javascript 谷歌地图 api 键这样做。 I checked the key by downloading platform API checker and it said it's successful.我通过下载平台API检查器检查了密钥，它说它是成功的。 I'm getting an error on the map that "this page can't load google maps successfully."我在 map 上收到错误消息，提示“此页面无法成功加载谷歌地图”。 What am I doing wrong below?我在下面做错了什么？ Thanks!谢谢！

personInfo.html 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>

Answer 1

I found that the api key you're currently used to is the api key for development purpose only.我发现您当前使用的 api 密钥是 api 密钥，仅用于开发目的。 As the documentation said here .正如文档所说here 。

You have to create your own API key here .您必须在此处创建自己的 API 密钥。

A little bit suggestion to not put your api key like that (front-end side), instead of retrieve the key from the back-end (you might want to use.env file).一点建议不要像这样（前端）放置您的 api 密钥，而不是从后端检索密钥（您可能想要使用 .env 文件）。

如何正确调用 javascript google map api ZC1C425268E68385D1AB5074C17A94F14？

问题描述

1 个解决方案

解决方案1
-1 已采纳 2020-05-02 09:54:28

如何正确调用 javascript google map api ZC1C425268E68385D1AB5074C17A94F14？

问题描述

1 个解决方案

解决方案1 -1 已采纳 2020-05-02 09:54:28

解决方案1
-1 已采纳 2020-05-02 09:54:28