Карты Google не отображаются, HTML

Question

В настоящее время я работаю над программой отслеживания IP, но у меня есть некоторые проблемы с функцией карт Google, я не могу показать карту или поставить маркер на месте IP.Кто-нибудь может указать мне правильные направления?

Вот код, который я использовал для карты, я взял его с собственного сайта Google.

<div id="map"></div>

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnoX8LSgSg5-pRiF5_IzZ313VsNZzuo-4&callback=initMap"
 async defer></script>

Вот мой полный код:

Answer 1

Чтобы показать карту, вам нужно предоставить height.

Добавьте эту высоту в вашем стиле для div с идентификатором map

 #map {
     height: 300px;
 }

Обновление:

если контейнер карты (с картой идентификатора) должен занимать 100% высоты тела HTML.Обратите внимание, что мы должны специально объявить эти проценты для и.

 #map {
    height: 100%;
 }

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 }

Answer 2

Вы не добавили ключ API

Предупреждение API JavaScript Карт Google: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys mw.m @ util.js: 220 util.js: 220 Предупреждение API Google Карт JavaScript:InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key