google嵌入式地图有时会破坏

Question

有时我的地图会像这样正常加载。

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

有谁知道为什么我有时会得到破碎的地图？而且，我如何修复它以始终呈现正确的地图？

有些背景，我正在使用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>

和MapCtrl

(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

}）（）

Answer 1

对于感兴趣的各方......问题结果是上面的HTML包含在最初隐藏的较大div中。谷歌嵌入地图在隐藏的div中行为不正常。解决方案是将div高高地推向视觉隐藏而不是字面上。