Angularjs 谷歌嵌入地图渲染有时会出错

有时我的地图通常是这样加载的

有时它会像这样加载这个奇怪的偏离中心的世界地图

有人知道我为什么有时会得到那张破地图吗？还有，我如何修复它以始终渲染正确的贴图

在一些背景下，我正在使用AngularJs在iframe中创建src

更新 这是HTML

    <div ng-controller="MapCtrl" class="left" id="interactiveMap">
        <iframe
          width="300"
          height="225"
          frameborder="0" style="border:0"
          ng-src={{map.url}}>
        </iframe>


    </div>

---

})（）

对于相关方。。。。问题是上面的HTML包含在一个更大的div中，这个div一开始是隐藏的。谷歌嵌入的地图在隐藏的div中无法正常运行。解决方案是将div推到非常高的位置，以便在视觉上隐藏，而不是在字面上隐藏

加载贴图时，iframe需要有一个大小，显然，当它看起来像第二个时，此时没有大小image@Dr.Molle高度/宽度在iframe中硬编码。是否有更高的优先申报地点？我认为CSS加载在html之后…相关的大小是真实的、计算的大小。当父元素在iframe src加载时隐藏时，iframe的计算大小为0x0

(function () {
'use strict';

function MapCtrl($scope, $http, $sce, $timeout) {

    $scope.$parent.$watchCollection('business', function() { 
       $scope.getPreAddress()

       $timeout(function() {
           $scope.getMap()   
       },2000)


    },true)

    $scope.getPreAddress = function() {
        var preAddress = $scope.business.address1 + 
        " " + $scope.business.address2 + 
        ","+ $scope.business.city+ 
        " " + $scope.business.state + 
        " "+ $scope.business.zip

        return preAddress.replace(/ /g, "+")            
    }

    $scope.getMap = function() {
        $http.get("/src/json/map-keys.json").success(function(data){
            $scope.keys = data
            $scope.map = {
                url:$sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?key="+$scope.keys.google.google_key+"&q="+$scope.getPreAddress()+"&zoom=16")
            } 
        })                  
    }

 }
module.exports = MapCtrl