Wie lade ich die Adresse dynamisch in eine eingebettete Google Map?

Question

Bitte mit mir, weil ich ein N00b bin. Ich erstelle eine Ionic App mit Firebase und AngularJS.
Was ich versuche, ist eine Karte laden mit dem Adressort aus der Datenbank gezogen. (Die hartcodiert ist keine Option) ich dies als externe Link wie folgt tun:

<a href="http://maps.google.com/?q={{task.street}}, {{task.city}}, {{task.zip}}">See Location</a> 

und es funktioniert, aber es öffnet sich auf die Web-Seite Google Maps oben (was für eine nicht praktikabel ist, app) Also, ich habe versucht, die Karte in einem iframe wie diese Einbettung:

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

aber ich kann es nicht zu arbeiten. Meine Vermutung ist, weil der iframe "außerhalb" der Seite ist und die dynamischen Daten nicht erkennt. Weiß jemand, wie ich die Adresse dynamisch in eine eingebettete Karte laden kann, oder gibt es eine bessere Möglichkeit, dies mit AngularJS zu tun? Im Idealfall möchte ich alle Funktionen in der App selbst verfügbar haben, auch wenn das bedeutet, dass Sie zu einem kostenpflichtigen Dienst gehen müssen. Im Moment versuche ich jedoch, die Karte einfach einzubetten.

Vielen Dank im Voraus!

Update1

Ich habe nicht das Update noch nicht gefunden, aber ich denke, ich habe das Problem gefunden. In der Konsole gibt es einen Fehler, der sagt: "Ein vertrauenswürdiger Wert ist erforderlich" und Links zu diesem, docs.angularjs.org/api/ng/service/$sce Ich muss dies lesen und zurück

Update 2

ich habe dies den Controller:

$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx"); 

und habe die html dazu:

<iframe 

    width="100%" 
    height="450px" 
    frameborder="0" style="border:0" 
    ng-src="{{trustedURL}}" allowfullscreen> 
    </iframe> 

Dieser Fest die Fehler "Ein vertrauenswürdiger Wert ist erforderlich", aber ich bekomme immer noch das gleiche Ergebnis - eine Karte mit einem zufällig generierten Ort. Es erkennt die dynamisch geladenen Daten in {{}} nicht. Irgendwelche Gedanken ???

Answer 1

Try ng-src statt 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

Verwenden Sie es wie folgt zu verwenden:

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

Answer 3

Schritt 1

HTML in HTML

verwenden

methodToGetURL: eine Funktion, die

Beispiel- iframe

[src]="methodToGetURL()" allowfullscreen /iframe' 

Schritt 2) Komponentendatei

hinzufügen DomSanitizer HTTL url von Komponentendatei zurück:

import {DomSanitizer} from '@angular/platform-browser'; 

Funktion:

methodToGetURL() `enter code here`{ 
     return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your URL here'); 
}