Google Maps InfoWindow - (clic) déclenche une fonction Angular 2

Question

J'ai un composant qui utilise google maps dans une application Angular 2+. Y a-t-il une manière décente d'obtenir un lien dans l'infowindow d'un marqueur qui déclenchera une méthode dans mon composant? Le (click) ci-dessous est le point sensible. Je peux échanger à onclick si je veux jouer avec une méthode globale (en espérant éviter cela).

//Add directions if we have a current location 
let additionalContent = ""; 
if(this.positionMarker){ 
    additionalContent = `<br><a href='#' (click)='startNavigating(${marker.position.lat()}, ${marker.position.lng()})'>Directions</a>`; 
} 

let infoWindow = new google.maps.InfoWindow({ 
    content: content + additionalContent 
}); 

google.maps.event.addListener(marker, 'click',() => { 
    infoWindow.open(this.map, marker); 
}); 

Answer 1

Trouvé quelques pièces pour faire ce travail sans frais généraux angulaire fou. Les clés étaient:

1. Seulement avoir 1 fenêtre d'information (membre)
2. Ajouter des identifiants uniques aux balises d'ancrage
3. Lorsque le InfoWindow ouvre (domready), ajoutez un écouteur de clic à l'ID de l'ancre qui était clique

code ci-dessous:

//Add directions if we have a current location 
let additionalContent = ""; 
if (this.positionMarker) { 
    additionalContent = `<br><a href='#' id='marker_${markerId}'>Directions</a>`; 
} 

//Add the marker listener to open the infowindow 
google.maps.event.addListener(marker, 'click',() => { 
    this.infoWindow.setContent(content + additionalContent); 
    this.infoWindow.open(this.map, marker); 

    //Once infow window is open, add a click listener based on the ID in the anchor tag 
    if (additionalContent) { 
    google.maps.event.addListenerOnce(this.infoWindow, 'domready',() => { 
     document.getElementById(`marker_${markerId}`).addEventListener('click',() => { 
     this.startNavigating(marker.position.lat(), marker.position.lng()); 
     }); 
    }); 
    } 
});