Can't get Google maps API when HTML loads

Question

I am trying to run a Google maps API on my Contact page for the site from a Blix mobile template, but I believe that since the Contact page is loaded over the main page or due to the custom scripts that have the source for the MAP API does not get called at all. I know that the code I want to run is not a problem, but my script does not end up called at all in my template, and I have no idea what to try since I'm a beginner.

You can find here the site itself. The problem I have is the contact page.

        #map{
            height: 80%;
            width: 80%;
        }
        html,body{
            height: 100%;
            margin: 0;
            padding:0;
        }

        <div id="map">
<script>
            console.log("test 1");
          var map;
          function initMap() {
          map = new google.maps.Map(
              document.getElementById('map'),
        
              {center: new google.maps.LatLng(40, 20), zoom: 16});
              console.log("test 2");
        
          var iconBase =
              'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
              console.log("test 3");
        
          var icons = {
            info: {
              icon: iconBase + 'info-i_maps.png'
            }
          };
              console.log("test 4");
        
          var features = [
            {
              position: new google.maps.LatLng(40, 20),
              type: 'info'
            }
          ];
              console.log("test 5");
        
          // Create markers.
          for (var i = 0; i < features.length; i++) {
            var marker = new google.maps.Marker({
              position: features[i].position,
              icon: icons[features[i].type].icon,
              map: map
            });
          };
            console.log("test 6");
        }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0&callback=initMap"></script> 

Answer 1

You have to load the Maps Script before the actual JS and then call the function at the end of the bottom in JS, so please use:

#map {
  height: 80%;
  width: 80%;
}

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0"></script>

<script>
  var map;

  function initMap() {
    map = new google.maps.Map(
      document.getElementById('map'),

      {
        center: new google.maps.LatLng(40, 20),
        zoom: 16
      });

    var iconBase =
      'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

    var icons = {
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    var features = [{
      position: new google.maps.LatLng(40, 20),
      type: 'info'
    }];

    // Create markers.
    for (var i = 0; i < features.length; i++) {
      var marker = new google.maps.Marker({
        position: features[i].position,
        icon: icons[features[i].type].icon,
        map: map
      });
    };
  }

  initMap();
</script>