Как правильно вызвать javascript API API Google Map? - PullRequest
Новая
       79

Как правильно вызвать javascript API API Google Map?

0 голосов
/ 02 мая 2020

Я пытаюсь, чтобы карты Google отображались на моем сайте с Лос-Анджелесом в его центре. Я делаю это с помощью javascript ключа API Google Maps. Я проверил ключ, загрузив платформу API Checker, и он сказал, что это успешно. Я получаю сообщение об ошибке, что «эта страница не может загрузить карты 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>

1 Ответ

0 голосов
/ 02 мая 2020

Я обнаружил, что ключ API, к которому вы сейчас используете, является ключом API только для целей разработки. Как сказано в документации здесь .

Вы должны создать свой собственный ключ API здесь .

Небольшое предложение чтобы не помещать ваш ключ API таким образом (передняя сторона) вместо того, чтобы извлекать ключ из внутреннего конца (вы можете использовать файл .env).

...