Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display custom tag in google maps infowindow angular2

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.

like image 304
Rajul Babel Avatar asked Feb 05 '23 15:02

Rajul Babel


1 Answers

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

like image 124
yurzui Avatar answered Feb 07 '23 04:02

yurzui