angularjs - google embeded map renders broken sometimes -


sometimes map loads this.

perfect map

and loads weirdly off-center broken world map this

broken map

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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -