Not able to load google map URL through Angularjs

Question

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>

I wonder if the problem is related to how you are using Onsen (I'm not sure you are injecting that library correctly) — sfletche
– sfletche, Commented Apr 25, 2015 at 21:29
sfletche thank you looking into the issue. But can you please explain where i am using it wrong. As i am new in using onsen. And till now what i am doing is working fine. Is there something you can suggest to make it right? — user3201500
– user3201500, Commented Apr 25, 2015 at 21:32
read the $sce docs, since that's the service causing the issue — charlietfl
– charlietfl, Commented Apr 25, 2015 at 21:33

Ed Knowles · Accepted Answer · 2015-04-25 21:41:22Z

3

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>

answered Apr 25, 2015 at 21:41

Ed Knowles

1,9251 gold badge16 silver badges24 bronze badges

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

4 Comments

user3201500 Over a year ago

Its throwing error like: Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module ngSanitize due to: Error: [$injector:nomod] Module 'ngSanitize' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Ed Knowles Over a year ago

Please can you post how your including angular and angular-sanatize in your index.html?

user3201500 Over a year ago

user3201500 Over a year ago

Ok got it. I was using wrong name there. So now its resolved. Thank you so much!

Collectives™ on Stack Overflow

Not able to load google map URL through Angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related