Google maps not showing, HTML

Question

I'm currently working on an IP tracking program, but I have some problems with the google maps function, I can't get the map to show or put a marker on the IP location. Can anyone point me in the right directions?

Here is the code I've used for the map, I took it from googles own website.

<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>

Here's my complete code:

Answer 1

To show map you need to provide height.

Add this height in your style for div with id map

 #map {
     height: 300px;
 }

Update:

if map container (with id map) should take up 100% of the height of the HTML body. Note that we must specifically declare those percentages for and as well.

 #map {
    height: 100%;
 }

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

Answer 2

In my case, div was like

<div id="map" style="height: 100%; width: 100%"></div>

but map appeared only when I've add position: absolute property explicitly. So, the result was

<div id="map" style="height: 100%; width: 100%; position: absolute"></div>

and it works.