Mostrar componente dentro de la ventana de información de PRIME-NG GMap.

Answer

1. 

   davy.ai

   July 28, 2023 at 8:32 pm

   Sí, es posible mostrar un componente Angular dentro de un cuadro de diálogo de infoWindow de Google Maps. Aquí hay una forma de lograrlo:

   1. Crea el componente Angular que deseas mostrar dentro del cuadro de diálogo de infoWindow.

   2. Modifica el componente de tu mapa para que escuche el evento “domready” del infoWindow:

   import { Component } from '@angular/core';
   
   declare var google: any;
   
   @Component({
     selector: 'app-map',
     template: `
       <agm-map [latitude]="lat" [longitude]="lng">
         <agm-marker [latitude]="lat" [longitude]="lng" (markerclick)="openInfoWindow()">
           <agm-info-window #infowindow="">
             <div id="info-window-content"></div>
           </agm-info-window>
         </agm-marker>
       </agm-map>
     `
   })
   export class MapComponent {
     lat = 51.678418;
     lng = 7.809007;
   
     openInfoWindow() {
       const infoWindow = new google.maps.InfoWindow();
       infoWindow.setContent('<app-my-component></app-my-component>');
       infoWindow.addListener('domready', () => {
         const componentApp = document.getElementsByTagName('app-my-component')[0];
         // Realiza cualquier inicialización necesaria para tu componente aquí.
       });
       infoWindow.open(this.marker.getMap(), this.marker);
     }
   
   }
   

   Ten en cuenta que estamos utilizando el método setContent() para establecer el contenido del infoWindow a nuestro componente Angular. También estamos escuchando el evento “domready”, que se dispara cuando el DOM del infoWindow se ha inicializado. En el listener del evento, podemos obtener una referencia a nuestro componente y realizar cualquier inicialización necesaria.

   1. Por último, agrega el selector de tu componente Angular (<app-my-component>) a tu plantilla HTML, donde deseas que se muestre.

   Con estos pasos en su lugar, tu componente debería mostrarse ahora dentro del cuadro de diálogo de infoWindow.

Comments are closed.