Google maps error during visualization

问题:

I have a small directive that handle google map in my Angular application:

app.directive('googleMaps', function($rootScope, $q, $window){    var mapLoader = $q.defer();    function loadGoogleApi(key){        var script = document.createElement('script');        script.type = 'text/javascript';        script.src= "https://maps.googleapis.com/maps/api/js?key=" + key + "&callback=initMap";        $('body').append(script);        return mapLoader.promise;    };    $window.initMap = function(){        mapLoader.resolve();    };    return {        restrinct: 'E',        link: function($scope, element, attrs){            loadGoogleApi('AIzaSyBtuQ-wYoHqnAxpXh8hTAfEH8BQCiBSCWw').then(function(){                $scope.map = new google.maps.Map(element[0], {                    zoom: 4,                    center: { lat: 20, lng: 40 }                });                google.maps.event.trigger($scope.map,'resize');            });         }    }; }); 

Then in my index.jade i have the following code:

//Other stuff div.col.s12.m12.map-container     h6="I miei spot"     google-maps 

All the initialization procedure succeeded but when I use the map on the website, I can see various strange graphic bug like this.

I am using materialize.css and this simple css in that part of code:

google-maps { width: 100%; height: 300px;display: block; } .map-container { height: 220px;margin-top: 10px; } 

I don't understand why there is that bug, and i didn't found anything on internet about that bug.

回答1:

I solved the problem by removing in my css file this line of code:

.map-container img { border-radius: 50%; } 

It was a simple error of logic.

文章来源: Google maps error during visualization