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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With