Service Portal Google Maps widget

[yundlu316]

I'm trying to build a google maps widget that shows the logged in user's location.   My html is as follows:

<div class="map-container">

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

</div>

My server script is:

data.location =gs.getUser().getLocation();

This doesn't seem to work, however when I replace {{data.location}} with an actual location such as Space+Needle,Seattle+WA, the widget populates.  

Any suggestions?

[yundlu316]

Hey Brad,

When I take out all of the map html just to see what location renders...

HTML:   <h1> {{data.user}} from {{data.location}}</h1>

Server: data.location = gs.getUser().getLocation();  

data.user = gs.getUserName()  

I get this:  

admin from f90ad9120a0a0b91005146ebac892a09

Looks like location is showing up as a SCID.   How can I get the actual location text?

[Brad Tilton]

I think you'd have to do a GlideRecord lookup to get the display value.

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

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

[Chuck Tomasi]

FYI - 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>

[Paul Hegel]

Thanks Chuck,

I used this to implement Google Maps Embed API in our service portal for locations.

Paul