時々、私のマップはこのように正常に読み込まれます。
そして時々、このように奇妙に中心からずれて壊れた世界地図をロードします
壊れたマップが時々表示される理由を誰か知っていますか? また、常に正しいマップをレンダリングするように修正するにはどうすればよいですか?
背景として、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
})()