Используйте карты Google Embed в угловых с динамическим атрибутом src

Question

Я использую angular (6) и пишу повторно используемый компонент для отображения встроенной карты Google.Основные причины:

• Местоположение является фиксированным, поэтому ссылка хранится в базе данных
• Пределы API выше при использовании API встроенной карты Google по сравнению с API карты Google.

Существует одна ловушка в использовании встроенной карты API - использование iFrame.По соображениям безопасности (xss) это немного сложнее реализовать.Хотя я использую Angulars DomSanitizer, мне все еще трудно присвоить исходную переменную.

Замена динамической ссылки статической работает, изменение [src] на src в iFrame дает мне ошибку маршрутизации.

Угловой компонент

    import { Component, OnInit, Input } from '@angular/core';
    import {DomSanitizer} from '@angular/platform-browser';

    @Component({
      selector: 'app-google-map-embed',
      templateUrl: './google-map-embed.component.html',
      styleUrls: ['./google-map-embed.component.css']
    })
    export class GoogleMapEmbedComponent implements OnInit {

      private placeUri:string = "";
      private key:String = "My_Key"
      @Input() type:string = "";

      constructor(public sanitizer:DomSanitizer) { }

      ngOnInit() {
        console.log(this.type);
        switch(this.type){
          case 'place':
            this.placeUri = "https://www.google.com/maps/embed/v1/place?key=" + this.key +
              "&q=Fairmont+Empress,Victoria+BC&attribution_source=Google+Maps+Embed+API&attribution_web_url=http://www.fairmont.com/empress-victoria/&attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC";
            break;
          case 'directions':
            this.placeUri = "https://www.google.com/maps/embed/v1/directions\
                              ?key=YOUR_API_KEY\
                              &origin=Oslo+Norway\
                              &destination=Telemark+Norway\
                              &avoid=tolls|highways"
        }
      }

      mapsURL() {
        console.log(this.sanitizer.bypassSecurityTrustUrl(this.placeUri));
        return this.sanitizer.bypassSecurityTrustUrl(this.placeUri);
      }

    }

Угловой шаблон

    <p>Generated URL for debugging purposes: {{placeUri}}</p>

    <iframe
      width="600"
      height="450"
      frameborder="0" style="border:0"

      [src]="mapsURL()" allowfullscreen>
    </iframe>

App-component.html

    <app-google-map-embed type='place'></app-google-map-embed>

Ссылки API: DomSanitizer: https://angular.io/api/platform-browser/DomSanitizer API встроенной карты Google: https://developers.google.com/maps/documentation/embed/guide API карты Google: https://developers.google.com/maps/documentation/javascript/adding-a-google-map