angularjs - google embeded map renders broken sometimes -
sometimes map loads this.
and loads weirdly off-center broken world map this
does know why broken map? , also, how can fix render correct map?
some background, i'm using angularjs create src in iframe.
update here's 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>
and 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
})()
for interested parties.... problem turned out html above contained in larger div hidden @ first. google embeded maps don't behave inside hidden divs. solution push div high hidden visually instead of literally.
Comments
Post a Comment