Google map rendered in gray screen

I am opening a modal using $uibModal , where it has a request, when the request arrives, it should render the map. The problem is that everything goes gray. Also, it's not centralizing ... you need to give a delay and then centralize ... Only when I click in full screen does the map appear. How do I resolve this?

Note: Just move the browser, stretch the screen, the map appears.

This is library that I'm using.

Map rendering method:

  $scope.googleMapsUrl = "https://maps.googleapis.com/maps/api/js?key="+GOOGLE_API_KEY;

  $scope.renderMap = function(content) {
                    /*****
                     * Documentação:
                     * https://ngmap.github.io/
                     */
                    $scope.dataMap = content;
                    $scope.typesFilter = "['address']";


                    NgMap.getMap().then(function(map) {
                        $scope.map = map;

                        map.setCenter(content.send_center);

                        google.maps.event.trigger(map, "center_changed");
                       if (!$scope.loading_school) {
                           window.load = function() {
                               $timeout(function () {
                                   $scope.map.setCenter(content.send_center);
                                   google.maps.event.trigger($scope.map, "center_changed");
                               }, 10000);
                           }
                       }


                    });

                    $scope.showModal = function(evt, item) {
                        $scope.store = null;
                        $scope.store = item;
                        $scope.map.showInfoWindow($scope.store.infoWindow, this);
                    };

                };

Request method that is called at controller initialization:

function changeSchool() {
                $scope.loading_school = true;

                EscolasService.dadosEscola($scope.dados)
                    .then(function(rtn){
                        $scope.loading_school = false;
                          $scope.school = rtn.school_data;
                          $scope.equipaments = rtn.equipaments;
                          $scope.animation = true;
                          $scope.displayChart(rtn);
                          $scope.location_schools = rtn.location_schools;
                        $scope.centerMap = [
                             parseFloat(rtn.location_schools.selected_school.latitude),
                             parseFloat(rtn.location_schools.selected_school.longitude)
                        ].join(",");

                        var dadosMapa = {
                            shape: {
                                coords: [$scope.location_schools.selected_school.latitude, $scope.location_schools.selected_school.longitude],
                                type: 'poly'
                            },
                            collection: $scope.listCollection(rtn),
                            center:$scope.centerMap,
                            send_center:{
                                lat:parseFloat(rtn.location_schools.selected_school.latitude),
                                lng:parseFloat(rtn.location_schools.selected_school.longitude),
                            },
                            zoom:17
                        }

                        $scope.renderMap(dadosMapa);

                    }, function(){
                        $scope.loading_school = false;
                    });
            }

The modal view:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 box-graph map-google">
    <div map-lazy-load="https://maps-api-ssl.google.com/maps/api/js" map-lazy-load-params="{{googleMapsUrl}}">
    <ng-map class="size-map-customer" zoom="{{dataMap.zoom}}" center="[{{dataMap.center}}]"></ng-map>
   </div>
 </div>