Info button near map-marker is not showing inside map in @angular/google-maps": "^16.2.14"

i am trying to use angular/google-maps" on my project. what i want is near by map marker i need a info button once i click on that info button a table need to come.

Problem The info div is not coming inside that map. i am using angular 16 and @angular/google-maps": "^16.2.14"

code

<google-map
height="400px"
width="100%"

="center"
[zoom]="mapZoom"
[options]="mapOptions"
(mapMousemove)="onMapReady($event)"
>
<map-marker #marker *ngFor="let marker of vmmarkers1 let i=index"
[position]="marker.position"
[title]="marker.title"
[label]="marker.title"
[options]="marker.options"
(mapClick)="openInfoWindow(marker.info)"
[attr.parkingCount]="marker.parkingCount"
>
<div class="marker-pin" (click)="getParkingLots(marker.listingId)">
<span>{{marker.parkingCount}}</span>
</div>
</map-marker>
</google-map>

loadMarkers(): void {
//for multiple marker test , insted of vmmarkers use listingData
this.vmmarkers1 = this.vmmarkers.map(listing => ({
position: { lat: Number(listing.latitude), lng: Number(listing.longitude) },
label: { color: 'red', text: listing.listingId.toString(), className: 'custom-marker-label' },
title: `Listing ID: ${listing.listingId}`,
options: {
animation: google.maps.Animation.DROP ,
icon: {
url: '../../../../assets/img/map-pin.svg',
scaledSize: new google.maps.Size(35, 45),
label:"testll"
},
},
parkingCount: listing.parkingCount
}));
// Update map center based on the first listing
if (this.vmmarkers1.length > 0) {
this.center = this.vmmarkers[0].position;
}
}

Continue reading...​