javascript - Not able to load google map URL through Angularjs -
i trying send value $scope front end. url google embade. seems throwing error.
here attaching error screenshot.
and here how controller looks
var module = angular.module('app', ['onsen']); module.controller('listingmapctrl', function($scope, $http, $rootscope) { ons.ready(function() { $scope.maplocation="https://www.google.com/maps/embed/v1/directions?key=my_key&origin=current+location&destination="+$rootscope.latlong; }); });
and here calling it:
<iframe ng-src="{{maplocation}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>
do else had same problem? way rectify problem?
here how html head tag looks
<html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>come woodstock</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <link rel="stylesheet" href="styles/app.css"/> <link rel="stylesheet" type="text/css" href="styles/custom.css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="lib/onsen/js/angular/angular-sanatize.min.js"></script> //script want include <script type="text/javascript" src="js/custom.js"></script> </head>
you need mark url safe first, first inject ngsanitize app , include in html (<script src="angular-sanatize.min.js">
), , add $sce
controller. there can use trustasresourceurl
on url , use in ng-src.
js
var module = angular.module('app', ['onsen', 'ngsanitize']); module.controller('listingmapctrl', function($scope, $http, $rootscope, $sce) { ons.ready(function() { $scope.maplocation = "https://www.google.com/maps/embed/v1/directions?key=my_key&origin=current+location&destination="+$rootscope.latlong; $scope.maplocationurl = $sce.trustasresourceurl($scope.maplocation); }); });
html
<iframe ng-src="{{maplocationurl}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>
Comments
Post a Comment