CODEWITHSUNDEEP
javascriptangularjs
user3201500
user3201500

Reputation: 1618

Not able to load google map URL through Angularjs

I am trying to send the value from a $scope to a front end. That is a URL from google embade. But it seems like its throwing some error.

Here i am attaching a error screenshot.

enter image description here

And here is how my controller looks like 

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 is i am calling it:

<iframe ng-src="{{mapLocation}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>

Do anyone else had the same problem? Any way to rectify the problem?

Here is how my HTML Head tag looks like 

<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 To 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 we want to include

  <script type="text/javascript" src="js/custom.js"></script>
</head>

Upvotes: 0

Views: 332

Answers (1)

Ed Knowles
Ed Knowles

Reputation: 1925

You need to mark the URL as safe first, first inject ngSanitize into your app and include it in your html (<script src="angular-sanatize.min.js">), and add $sce to your controller. From there you can use trustAsResourceUrl on your url and use that in your 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>

Upvotes: 3

Related Questions