How do I load the address dynamically in an embedded google map? - angularjs

Question

Bear with me please, because I am a N00b.
I am creating an Ionic app with Firebase and AngularJS.
What I am trying to do is have a map load with the address location drawn from the database. (Being hard-coded is not an option) I can do this as an external link like this:
See Location
and it works, but it opens up to the web page google maps (which isn't practical for an app)
So, I have tried embedding the map in an iframe like this:
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
but I can't get it to work. My guess is because the iframe is "outside" of the page and not recognizing the dynamic data. Does anyone know how I can load the address dynamically into an embedded map, or is there a better way to do this using AngularJS? Ideally, I would like to have all the functions available in the app itself, even if this means having to go to a payed service. For now, though, I am trying to simply embed the map.
Thanks in advance!
Update1
I haven't found the fix yet, but I think I found the problem. In the console there is an error saying: "a trusted value is required" and then links to this, docs.angularjs.org/api/ng/service/$sce I will have to read over this and get back
Update 2
I added this to the Controller:
$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");
And changed the html to this:
<iframe
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="{{trustedURL}}" allowfullscreen>
</iframe>
This fixed the error "a trusted value is required", but I am still getting the same result - a map with a randomly generated location. It's not recognizing the dynamically loaded data in {{}}. Any thoughts???

Answer 1

Try to use ng-src instead of src
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>

Answer 2

Use it like this:
<iframe
ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>

Answer 3

Step 1
HTML Inside html use
[src]=methodToGetURL()
methodToGetURL: a function which return httl url from component file
EXAMPLE- iframe
[src]="methodToGetURL()" allowfullscreen /iframe'
Step 2) component file
Add DomSanitizer:
import {DomSanitizer} from '#angular/platform-browser';
function :
methodToGetURL() `enter code here`{
return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your URL here');
}