How to insert longitude & latitude in iframe in angular js?

Question

Hei

I am using angular and trying to implement iframe in it . I'ave tried many ways to insert longitude and latitude which are coming from database but whenever try to write something like this I get error.

what I tried

<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q={{product.mall.lat}},{{product.mall.long}}&amp;key= key"  allowfullscreen></iframe>

I get this error when i tried the above way

[$interpolate:noconcat]

Normal iframe

<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&amp;key= Akey"  allowfullscreen></iframe>

Answer 1

use ng-src instead of src.

you cannot concatenate the URL inside the source attribute for security reasons: you must concatenate the URL in Javascript in a scope variable e.g. fullURL and then ng-src="{{fullURL}}".

if Strict Contextual Escaping (SCE) is enabled ‒ and Angular v1.2 ships with SCE enabled by default ‒ you need to whitelist the URLs.

Reference 1 Angular js scope var value in iframe

Answer 2

Now its work, you need to wrap url into a method, that make it as a trusted url source

in html

     <iframe width="100%" height="250" frameborder="0" style="border:0" ng-src='{{getTrustedUrl("https://www.google.com/maps/embed/v1/place?q="+product.mall.lat+","+product.mall.long+"&key=AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0")}}' allowfullscreen>

    </iframe>

add this function to your controller

  $scope.getTrustedUrl = function(src) {
  return $sce.trustAsResourceUrl(src);
  }

Answer 3

Its already been answered in another Question

AngularJS multiple expressions concatenating in interpolation with a URL

More details Strict Contextual Escaping

Answer 4

This is What My Mentor did

In my controller function where I was getting long & lat He did something like this

$scope.single_product = function (product_id) {
        $http.get('url' + product_id + '?expand=product_variants,product_variant_options,photos,shop,mall',
                {headers:
                            {'Content-Type': 'application/x-www-form-urlencoded',
                                'Authorization': $rootScope.keyword_auth_token}
                })
                .success(function (data) {
                    $scope.product = data;
                    $scope.photo = $scope.product.photos;   //Storing photos in phot object
                    for (var i = 0; i < $scope.photo.length; i++) {
                        slides.push({path: $scope.photo[i].path, id: currIndex++}); //I already mentioned slides as an array
                    }
                    console.log(slides);
                    console.log($scope.product);
                    var compile_map = '<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q='+$scope.product.mall.lat+','+$scope.product.mall.long+'&amp;key= AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0"  allowfullscreen></iframe>';
                    angular.element($document[0].querySelector('#map_image')).append(compile_map); //This function will run only and load the html if it has long and lat
                })
                .error(function (data) {
                    console.log(data);
                });
    };

and then in html simply that

<div id="map_image"></div>

It works like a charm