Google Maps rendering - strange circles cover the map

I'm using the angularjs-google-maps directive, my code looks like this:

(function () {
  define(['angular', 'app'], function (angular, app) {
    app.directive('customMap', function () {
      var customMapTemplate =
        "<div class= \"vertical-collapse\" ng-class=\"{ 'opened' : showMap() }\">" +
        "       <div map-lazy-load=\"https://maps.google.com/maps/api/js\"" +
        "             map-lazy-load-params=\"{{googleMapsUrl}}\" >" +
        "           <ng-map center=\"64,-21\" zoom=\"10\"></ng-map>" +
        "       </div >" +
        "</div> " +
        "&nbsp;";
      // console.log(customMapTemplate);
      return {
        restrict: 'E',
        template: customMapTemplate,
        controller: function ($scope) {
          console.log($scope.showMap());
          $scope.googleMapsUrl = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBUKGtliE38keJLwWjbOrM2uPFiSSDRKZA';
        },
        scope: {
          'showMap': '&showMap'
        }
      };
    });
  });
}).call(this);

and this map doesn't render properly. I have some strange circles on it, and don't know why?

any idea why is that?

The problem was with the wrong CSS styles in the project img (border-radius: 100%) was set globally by someone.