Using an angular expression in an ng-src with google maps embed api

Question

I am trying to load a map on each page that is specific to the values from an api, but I am getting this error message:

Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See http://docs.angularjs.org/api/ng.$sce http://errors.angularjs.org/1.2.15/$interpolate/noconcat?

Here is the markup:

<div ng-bind-html="trustedHtml" class="col-md-4 map">
    <iframe ng-src="https://www.google.com/maps/embed/v1/placekey=AIzaSyAJ_lVIxNq31PmzRUbMh9JIStQOE4_6-aQ&q='{{event.venue.name}}'"/>
</div>

and here is the controller:

.controller('EventsCtrl', function($scope, EventsFactory, $routeParams, $sce){
    EventsFactory.async().then(function(data){
        $scope.events = data.data;
        $scope.event= findEvent(eventId, $scope.events);
        console.log($scope.event);
        $scope.trustedHtml = $sce.trustAsHtml($scope.event);

Community · Accepted Answer · 2017-05-23 11:46:14Z

0

Instead of using $sce.trustAsHtml(), try using $sce.trustAsResourceUrl(). Place your whole URL as parameter for $sce.trustAsResourceUrl(). The link below worked for me.

How to set an iframe src attribute from a variable in AngularJS

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 9, 2016 at 7:57

Ardee Aram

4,7999 gold badges38 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using an angular expression in an ng-src with google maps embed api

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related