Display custom tag in google maps infowindow angular2

Question

map.component.ts code:

......
infoWindow = new google.maps.InfoWindow(
{
    content: `<custom-tag></custom-tag>`    //***not displaying anything***
});
infoWindow.open(map, marker);
......

map.component.html code:

<custom-tag></custom-tag>      <!--***displays hi***-->
<div class="google-maps"></div>

custom-tag.component.html code:

<h2>hi</h2>

The module.ts, routing.ts files have no errors for sure. The infowindow just opens and displays nothing, Please help me in figuring out why the infowindow is not displaying anything.

Answer 1

You have to create component dynamically via ComponentFactoryResolver

const compFactory = this.resolver.resolveComponentFactory(CustomTag);
this.compRef = compFactory.create(this.injector);

this.appRef.attachView(this.compRef.hostView);

let div = document.createElement('div');
div.appendChild(this.compRef.location.nativeElement);

this.infoWindow.setContent(div);
this.infoWindow.open(this.map, marker);

Here is Plunker Example

Don't forget to add CustomTag component to entryComponents