Я слежу за официальной документацией Google здесь: https://developers.google.com/maps/documentation/javascript/examples/map-simple.
Я пытаюсь настроить базовую карту, следуя вышеприведенному руководству, но карта не отображается на странице. Для пояснения, JavaScript API карт был включен через мой аккаунт Google, и я проверил мой ключ API, который наверняка работает. Вот мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Google map API</h1>
<div id="map"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<!-- async defer in first script tag if needed -->
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap" async defer ></script>
</html>
JavaScript:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 10,
});
console.log("map", map);
};
Вот скриншот вывода консоли: https://postimg.cc/p5PsjqP1
В консоли НЕТ ошибок, но консоль регистрирует переменную карты. Что мне здесь не хватает? Почему не отображается моя основная карта?