Google maps API not working, map only shows after I resize or refresh the page?

The resize event does not work for me.

Basically only a gray box loads up initially, it is only when I refresh or resize the browser that the map then loads fully .

The code I am using is given below for the maps:

<script>
    function initMap() {

        var center1 = {
            lat: 51.258426,
            lng: -1.361344
        };
        var londoneye = {
            lat: 51.503331,
            lng: -0.119543
        };
        var bigben = {
            lat: 51.500726,
            lng: -0.124629
        };
        var tower = {
            lat: 51.508139,
            lng: -0.075939
        };
        var ss = {
            lat: 51.449164,
            lng: -2.608417
        };
        var windsor = {
            lat: 51.483907,
            lng: -0.604435
        };
        var stone = {
            lat: 51.178895,
            lng: -1.826215
        };
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 8,
            center: center1
        });

        var map1 = new google.maps.Map(document.getElementById('map1'), {
            zoom: 14,
            center: londoneye
        });

        var map2 = new google.maps.Map(document.getElementById('map2'), {
            zoom: 14,
            center: bigben
        });

        var map3 = new google.maps.Map(document.getElementById('map3'), {
            zoom: 14,
            center: tower
        });

        var map4 = new google.maps.Map(document.getElementById('map4'), {
            zoom: 14,
            center: ss
        });

        var map5 = new google.maps.Map(document.getElementById('map5'), {
            zoom: 14,
            center: windsor
        });

        var map6 = new google.maps.Map(document.getElementById('map6'), {
            zoom: 14,
            center: stone
        });

        var boundary = new google.maps.Map(document.getElementById('boundary'), {
            zoom: 8,
            center: center1
        });

        var cityCircle = new google.maps.Circle({
            strokeColor: '#000000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.1,
            map: boundary,
            center: center1,
            radius: 100000
        });

        var marker1 = new google.maps.Marker({
            position: londoneye,
            map: map
        });

        var marker12 = new google.maps.Marker({
            position: londoneye,
            map: map1
        });

        var marker2 = new google.maps.Marker({
            position: bigben,
            map: map
        });

        var marker22 = new google.maps.Marker({
            position: bigben,
            map: map2
        });

        var marker3 = new google.maps.Marker({
            position: tower,
            map: map
        });

        var marker32 = new google.maps.Marker({
            position: tower,
            map: map3
        });

        var marker4 = new google.maps.Marker({
            position: ss,
            map: map
        });

        var marker42 = new google.maps.Marker({
            position: ss,
            map: map4
        });

        var marker5 = new google.maps.Marker({
            position: windsor,
            map: map
        });

        var marker52 = new google.maps.Marker({
            position: windsor,
            map: map5
        });

        var marker6 = new google.maps.Marker({
            position: stone,
            map: map
        });

        var marker62 = new google.maps.Marker({
            position: stone,
            map: map6
        });


        var marker1content = '<b><font color="black">London Eye</font></b>'
        var marker2content = '<b><font color="black">Big Ben</font></b>'
        var marker3content = '<b><font color="black">Tower of London</font></b>'
        var marker4content = '<b><font color="black">SS Great Brtain</font></b>'
        var marker5content = '<b><font color="black">Windsor Castle</font></b>'
        var marker6content = '<b><font color="black">Stonehenge</font></b>'

        var infowindow1 = new google.maps.InfoWindow({
            content: marker1content
        });

        var infowindow2 = new google.maps.InfoWindow({
            content: marker2content
        });
        var infowindow3 = new google.maps.InfoWindow({
            content: marker3content
        });
        var infowindow4 = new google.maps.InfoWindow({
            content: marker4content
        });
        var infowindow5 = new google.maps.InfoWindow({
            content: marker5content
        });
        var infowindow6 = new google.maps.InfoWindow({
            content: marker6content
        });


        marker1.addListener('click', function() {
            infowindow1.open(map, marker1);
        });
        marker2.addListener('click', function() {
            infowindow2.open(map, marker2);
        });
        marker3.addListener('click', function() {
            infowindow3.open(map, marker3);
        });
        marker4.addListener('click', function() {
            infowindow4.open(map, marker4);
        });
        marker5.addListener('click', function() {
            infowindow5.open(map, marker5);
        });
        marker6.addListener('click', function() {
            infowindow6.open(map, marker6);
        });
    }
</script>

I have looked at the browser console and there are no errors.

As I said before, I have also tried the resize function as mentioned by all the other similar threads.

Edit: I have also added the CSS below as per request, each id then corresponds to a div.

#map {
        height: 400px;
        width: 100%;

          margin: 0 auto;
          margin-top: 10%;   
       }

     #map1{

        height: 400px;
        width: 100%;

          margin: 0 auto;
          margin-top: 10%;
         }

     #map2{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
            }
      #map3{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
        }

     #map4{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
        }

     #map5{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
          }

     #map6{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
          }

     #boundary{

       height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;  
          }