Custom google maps infowindow using ionic 2

Question

I am new to ionic 2, I am trying to create a custom info window, so when a user clicks on a marker they can see some basic information like a picture and the name of the location, but they can also click on a link in the infoWindow that opens a modal with details on that location. Here is how i want to add it to my marker.

addMarker(lat: number, lng: number, place: any): void {
    let latLng = new google.maps.LatLng(lat, lng);

    let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: latLng,
        title: place.name
    });

    let infoWindow = new google.maps.InfoWindow({
       content: `<>custom template here with some basic details</>`
    });

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

    });

    this.markers.push(marker);
} 

Answer 1

If you don't want to use any external library then you can see below example. You need to add addEventListener when infowindow is ready.Because when infowindow is ready you can find the component by document.getElementById('id').

let infoWindow = new google.maps.InfoWindow({
    content :  `<p id = "myid">Click</p>`
});
google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
    document.getElementById('myid').addEventListener('click', () => {
            alert('Clicked');
        });
});