An alternative example of solution for grey area using ng-map. **This example can be useful if you are using ui-router**

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>Simple map lazy loading example</title>
  <meta name="description" content="An alternative example of solution for grey area using ng-map">
  <meta name="keywords" content="AngularJS, ng-map, Google Maps">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body>
  <!-- https://github.com/allenhwkim/angularjs-google-maps/issues/786 -->
  <plnkr-map></plnkr-map>
</body>
</html>


angular.module('app', ['ngMap']);

var plnkrMap = {
  templateUrl: 'plnkr-map.html',
  controller: PlnkrMapController
}

angular
  .module('app')
  .component('plnkrMap', plnkrMap)
  .controller('PlnkrMapController', PlnkrMapController);

function PlnkrMapController(NgMap, $timeout) {
  vm = this;
  vm.mapsApiUrl = ''; // check the ng-map docs for api url and api key
  vm.coords = [-23.556059, -46.631563];
  vm.$onInit = onInit;
  
  function onInit() {
    NgMap.getMap().then(function (mapInstance) {
      // vm.map = mapInstance;
      // The line above is enough but if you are using ui-router
      // maybe the code below is necessary
      var center = mapInstance.getCenter();
      
      google.maps.event.trigger(mapInstance, 'resize');
      mapInstance.setCenter(center);
      
      $timeout(function () {
        vm.map = mapInstance;
      });
    });
  }
}

/* Styles */

.map, ng-map {
  display: block;
  position: relative;
}

ng-map { height: 400px; }

.map__backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #f5f5f5;
}

.spinner {
  width: 36px;
  height: 36px;
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
}

.spinner__path {
  stroke-dasharray: 1,150; /* 1%, 101% circumference */
  stroke-dashoffset: 0;
  stroke: #0275d8;
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1,150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -124;
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -124;
  }
}

<div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{$ctrl.mapsApiUrl}}">
  <div class="map">
    <ng-map id="map" center="{{$ctrl.coords}}" zoom="13">
      <marker position="{{$ctrl.coords}}" ng-if="$ctrl.coords"></marker>
    </ng-map>
    <div class="map__backdrop" ng-if="!$ctrl.map">
      <svg class="spinner" viewBox="0 0 52 52">
        <circle class="spinner__path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px"></circle>
      </svg>
    </div>
  </div>
</div>