HTML Javascript function only works on second click

Question

I am trying to show a google map on a bootstrap tab, however the map only shows correctly when the tab is clicked on the second time. On the first click, there is a lot of grey area and the map needs to resize. I've looked at this but nothing there helps.

js:

<script type="text/javascript">

$('a[href="#sectionB"]').on('shown', function (e) {
    initMap();
});


function initMap() {
    var uluru = {lat: -34.031342, lng: 18.577419};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: uluru,
        mapTypeId: 'satellite'

    });

    var marker = new google.maps.Marker({
      position: {lat: -34.031342, lng: 18.577419},
      map: map
    });
    }
</script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&callback=initMap">
    </script>

html:

<div class="col-md-12">  

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sectionA">Details</a></li>
<li><a data-toggle="tab" id = "sectionb" href="#sectionB" onclick="initMap(); return false;">Location</a></li>
</ul>
<div class="tab-content">
    <div id="sectionA" class="tab-pane fade in active">
    <div class="col-md-8" style = "padding-top: 3%">
    </div>
    </div>
    <div id="sectionB" class="tab-pane fade">                 
    <div class="row">
    <div class="col-md-8">
    <div id ="map" style="width:400px;height:400px;"> 
</div>
</div>
</div>