How to hide show map in angular ionic

[madara-uchihaaa]

i am using <div [hidden]="isMapEnabled" id="map"></div>
and loading the map on same container , in capacitor/google-map it was working but not working in capacitor-community/google-map in this package it not getting visible instead a blank screen is there

[madara-uchihaaa]

@elylucas
@va2ron1
@stewones

[stewones]

sounds like a problem with your frontend framework, anyways it's hard to tell without any code reproduction.

[madara-uchihaaa]

"@capacitor-community/google-maps": "^2.0.0-beta.1"
"@ionic/angular": "^6.3.6",
"ionic": "^5.4.16",

dev dep
"@ionic/angular-toolkit": "~2.0.0",

app.component.ts
`import { CapacitorGoogleMaps, Marker } from '@capacitor-community/google-maps';
mapId: string = null;
markerId: string = null;
marker: Marker = {
mapId: this.mapId,
markerId: this.markerId,
position: {
latitude: 0,
longitude: 0
},
preferences: {
isDraggable: true
}
};
isMapEnabled = false;
@ViewChild('map', {
read: ElementRef,
static: true
})
set Map(map: ElementRef){
this.initialize(0.0,map)
}

async initializeMap(lat: number, long: number, elementRef: ElementRef) {
await CapacitorGoogleMaps.initialize({
key: 'API_KEY',
devicePixelRatio: window.devicePixelRatio
});
const result = await CapacitorGoogleMaps.createMap({
element: elementRef.nativeElement,
boundingRect: elementRef.nativeElement.getBoundingClientRect(),
cameraPosition: {
zoom: 14,
target: {
latitude: lat,
longitude: long
}
},
preferences: {
appearance: {
type: 4
}
}
});
this.mapId = result.googleMap.mapId;
this.marker.mapId = this.mapId;
this.marker.position.latitude = lat;
this.marker.position.longitude = long;
elementRef.nativeElement.setAttribute('data-maps-id', this.mapId);

    console.log('in initialize map');
    this.mapLogger();

    await CapacitorGoogleMaps.didTapMap({ mapId: this.mapId }, async (result, error) => {
        if (error) {
            console.error(error);
            return;
        }
        if (result) {
            const { latitude, longitude } = result.position;
            console.log('in did tap map');
            this.mapLogger();
            await this.updateMarker(latitude, longitude);
        }
    });
    await CapacitorGoogleMaps.didEndDraggingMarker({ mapId: this.mapId }, async (result, error) => {
        if (error) {
            console.error(error);
            return;
        }
        if (result) {
            const { latitude, longitude } = result.marker.position;
            console.log('in did end dragging marker');
            this.mapLogger();
            await this.updateMarker(latitude, longitude);
        }
    });
}

async ngOnInit(){
// on some action from other component
// ={
this.mapEnabled= true;
}
}
async closeMap() {
this.addClasses();
// handle classes for viewport bg transparent and others.
this.isMapEnabled = false;
console.log('in close map');
this.mapLogger();
await this.updateMarker(0, 0);
}
async sendData() {
this.addClasses();
this.isMapEnabled = false;
// send back data to parent component
console.log('in send data');
this.mapLogger();
await this.updateMarker(0, 0);
}

app.component.html

"<div id="map-container" #map> " //working
"<div id="map-container" [hidden]="!isMapEnabled" #map> "// not working

only the code without comment
as soon as i am puttingit inside a hidden ngIf or event an outer container and then conditional map inisde it just showing black screen or transparent i guess.
but by first div its fine

app.component.scss
.bottom-buttom {
height: 7vh;
}

#map-container{
width: 100vw;
height: 100vh;
background:transparent;
}
`

[madara-uchihaaa]

@elylucas
@va2ron1
@stewones

[stewones]

maybe a cdr.detectChanges() everytime you alter the value of isMapEnabled ?

[madara-uchihaaa]

Then how to solve this issue ? Is it feasible ? Or it's a limitation from package itself?

[stewones]

I believe it has nothing to do with the native package, it has to do with your frontend framework.
https://angular.io/api/core/ChangeDetectorRef

[madara-uchihaaa]

Any workaround possible in this case ?

[muhammadalizkhan]

Check if your CSS, configuration, and lifecycle hooks are correctly set up in capacitor-community/google-map and review the package's documentation and community for specific solutions.