Angular IFrame ng-src: Interpolate Error

Question

I am trying to embed a Google map inside an iframe using:

<div ng-repeat="event in ctrl.events">
    <iframe src="{{'https://www.google.com/maps/embed/v1/place?q=(' + event.location.latitude + '%2C' + event.location.longitude + ')&zoom=12&key=API_KEY'}}">
    </iframe>
</div>

However I get:

Error: $interpolate:interr Interpolation Error

My data set is in the form

$scope.events = 
[
    { 
        location : { 
            longitude: 1.1,
            latitude: -1.1
        }
    }
]

What am I doing wrong? I have tried ng-src but I get the same error

Possible duplicate of AngularJS Error: $interpolate:interr Interpolation Error — Shashank Agrawal
– Shashank Agrawal, Commented Mar 7, 2016 at 16:38

Shashank Agrawal · Accepted Answer · 2016-03-07 16:35:48Z

You have to allow the maps URL in your app's config like this:

myApp.config(["$sceDelegateProvider", function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        "self",
        // Allow loading from Google maps
        "https://www.google.com/maps/embed/v1/place**"
    ]);
}]);

From the docs:

The $sceDelegateProvider provider allows developers to configure the $sceDelegate service. This allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing Angular templates are safe. Refer $sceDelegateProvider.resourceUrlWhitelist and $sceDelegateProvider.resourceUrlBlacklist

See a working example below

(Of course, key is wrong so Map will complain)

var myApp = angular.module("sa", []);

myApp.config(["$sceDelegateProvider",
  function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(["self",
      "https://www.google.com/maps/embed/v1/place**"
    ]);
  }
]);

myApp.controller("foo", function($scope) {
  $scope.events = [{
    location: {
      longitude: 1.1,
      latitude: -1.1
    }
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="foo">
  <div ng-repeat="event in events">
    <iframe src="{{'https://www.google.com/maps/embed/v1/place?q=(' + event.location.latitude + '%2C' + event.location.longitude + ')&zoom=12&key=API_KEY'}}">
    </iframe>
  </div>
</div>

Devin McQueeney · Accepted Answer · 2016-10-18 06:25:05Z

0

*://www.google.com/maps/** did it for me:

angular.module('app', []).config(function($sceDelegateProvider){

$sceDelegateProvider.resourceUrlWhitelist([
    "*://www.google.com/maps/**"
]);

})

answered Oct 18, 2016 at 6:25

Devin McQueeney

1,2972 gold badges14 silver badges31 bronze badges

Comments

Santosh · Accepted Answer · 2018-09-14 06:34:13Z

0

Sometimes you may pick the images or iframe sources from public ips or domain names directly. In that case, you can also disable the blacklisting of all the URLs with the following code snippet.

var myApp = angular.module("sa", []);

myApp.config(function($sceProvider) {
  $sceProvider.enabled(false);
});

answered Sep 14, 2018 at 6:34

Santosh

2,3831 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular IFrame ng-src: Interpolate Error

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related