title: Initializing google map with kml layer using Angular: InvalidValueError: setMap: not an instance of Map
body: <p>I'm trying to initialize a google map with a kml layer. I have verified that the KML layer is working, and if I use vanilla JS I can get this to work (see fiddle of working: <a href="https://jsfiddle.net/x00t510d/2/" rel="nofollow noreferrer">https://jsfiddle.net/x00t510d/2/</a>), however I'm using angular and am initializing the map in ngOnInit().</p>
  
  <p>The following code produces a result of "InvalidValueError: setMap: not an instance of Map".</p>
  
  <pre><code>    export class MapComponent implements OnInit {
    @ViewChild('gmap') gmapElement: any;
    map: google.maps.Map;
  
    constructor() { }
  
    ngOnInit() {
  
      let mapProp: any = {
        center: new google.maps.LatLng(44.475, -73.212),
        zoom: 13,    
        mapTypeId: google.maps.MapTypeId.ROADMAP     
      };
  
       let ctaLayer = new google.maps.KmlLayer({
        url: 'https://sites.google.com/site/freeparkingburlington/home/freeParking.kml',
        map: mapProp
      });
  
    return this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    }  
  
  }
  </code></pre>
  
  <p>The map does get initialized but the layer does not. Does anyone have insight on how to more effectively use the KML layer in this scenario?</p>