google map does not show properly

Question

how to call initmap method in angularjs because. map does not show... properly when i use $scope.mymap = function(){} when i clicked refresh button its working fine, but when i change the tap, and clicked map tab map show below like picture

this.$window.initMap how to call this method in angularjs

 this.$window.initMap = function () { }  //this method map was show properly, but i am using tap , this code does not work

<li><a ng-click="initMap()"  href="#map" data-toggle="tab">Map</a></li>

Answer 1

then remove the callback for initMap in your call

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

then your call should work

<li><a ng-click="initMap()"  href="#map" data-toggle="tab">Map</a></li>

and then you a check for creation

  <script>
    var map;
    var mapCreated = false;  
    function initMap() {
      if (mapCreated == false) {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
      mapCreated = true; 
    }
    }
  </script>