Google Maps Rendering - seltsame Kreise die Karte bedecken

Question

Ich bin mit dem AngularJS-Google-Maps-Richtlinie sieht mein Code wie folgt aus:

(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); 

und diese Karte machen nicht richtig. Ich habe seltsame Kreise und weiß nicht warum?

eine Ahnung, warum ist das so?

Answer 1

Das Problem war mit den falschen CSS-Stilen im Projekt img (border-radius: 100%) wurde global von jemandem eingestellt.