How to open an InfoWindow using capacitor-google-map plugin?

I am using this : https://capacitorjs.com/docs/v4/apis/google-maps#setonmarkerclicklistener

I ran :

npm install @capacitor/google-maps
npx cap sync


Then created the map :


import { GoogleMap } from '@capacitor/google-maps';

@Component({
template: `
<capacitor-google-map #map></capacitor-google-map>
<button (click)="createMap()">Create Map</button>
`,
styles: [
`
capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}
`,
],
})
export class MyMap {
@ViewChild('map')
mapRef: ElementRef<HTMLElement>;
newMap: GoogleMap;

async createMap() {
this.newMap = await GoogleMap.create({
id: 'my-cool-map',
element: this.mapRef.nativeElement,
apiKey: environment.apiKey,
config: {
center: {
lat: 33.6,
lng: -117.9,
},
zoom: 8,
},
});
}
}

Once I get a click on a marker i would like to display an infowindow.

I am using the plugin from capacitor and not the google-map JS SDK.

How would you open an info-window using this library ?

I would like to show an info infow with the val callbackData which is the data of the marker.

this.map.setOnMarkerClickListener((val) => {
console.log(val);
});

Continue reading...