Service Portal map widget with user location

[yundlu316]

I'm trying to create a Google Map widget   that shows the user's location dynamically.   My code below is close but does not work:

Server Script:  

var gr = new GlideRecord('cmn_location');

gr.addQuery('sys_id', gs.getUser().getLocation());

gr.query();

if(gr.next())

{

var loc = gr.street.getHTMLValue();

}

loc1 = loc.replace(/,/g, "");

loc2 = loc1.replace(/ /g, "+");

data.src = loc2;

HTML:

<div class = "map-container">

  <iframe src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}}'></iframe>

</div>

The HTML doesn't seem to recognize {{data.src}}.   If I replace that with washington+dc, the map shows washignton dc correctly.   Conversely, if I take out the iframe code and replace it with <p>{{data.src}}</p>, the user's address in text shows up correctly as well.   There's something here where the iframe and {{}} code does not work together.   Has anyone run into this issue and have a solution?   Do I need to include a client script somehow?

Thanks!!

[Brad Tilton]

Take a look at this thread for using ngSrc in an iframe.

javascript - AngularJS ng-src inside of iframe - Stack Overflow

[Chuck Tomasi]

Hey Brad, That's one of the threads that lead me to my solution... thanks.

David, I just ran in to this as well and got it resolved.. If you look in the console log, you'll probably see some errors about untrusted stuff. The fix is to add this to your client script:

function($scope, $sce) {

  /* widget controller */

  var c = this;

  $scope.trustSrc = function(src) {

  return $sce.trustAsResourceUrl(src);

  }

}

Then call your URL in your HTML through that function (in my case, I'm inside an ng-repeat loop where loc is an object with a URL property)

<iframe ng-src="{{trustSrc(loc.url)}}" width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>

[rambo1]

Could you please paste your code here?