Google maps not showing, HTML

Issue

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:

Solution

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

Answered By - Nenad Radak