AngularJS, pause while loading Google Maps API

Question

I'm using Angular Google Maps to load Google Maps API, but there's a 3-4 seconds pause in loading API script. So everything on the page is loaded -> 3-4 seconds pause -> API scripts starts loading -> map displayed.

Looks like it's just waiting for some timer event:

Google Maps config snippet:

  uiGmapGoogleMapApiProvider.configure({
    key: 'xxxxxxxxxx',
    v: '3',
    libraries: 'geocoder',
    preventLoad: false,
    china: false,
    transport: 'https'
  });

Map loads here:

    <div id="shopMap" ng-init="initShopMap()"></div>

via this function:

$scope.initShopMap = function() {
  if ($scope.shop.latitude && $scope.shop.longitude) {
    uiGmapGoogleMapApi.then(function(maps) {
      shopMap = new maps.Map(document.getElementById("shopMap"), {
        control: {},
        options: {
          draggable: true,
          scrollwheel: false
        },
        center: new maps.LatLng(0, 0),
        zoom: 14,
        marker: {
          options: {
            icon: {
              scaledSize: { width: 24, height: 36 },
              url: '/images/pm-shop-icon.png'
            }
          }
        }
      });

      directionsService = new maps.DirectionsService();

      initMarkers();
      $scope.showShopMap = true;
    });
  }
}

Any ideas why that delay might happen? Would very appreciate any hints, thanks ✨

Answer 1

Turned out, that api loading in this project was wrong, there wasn't this line in index.htm:

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

I wonder how maps even worked without this line :)