How to remove map controls on angular + ionic + capacitor

I have an angular + ionic + capacitor project where I want to show a map with a searchbar and a card, I am using google maps but I want to remove the UI controls, like the yellow guy for the streetview, the + and - for the zoom etc.

export class HomePage implements AfterViewInit {
@ViewChild('map') mapRef!: ElementRef;
newMap!: GoogleMap;

async ngAfterViewInit() {
await this.getCurrentLocation();
}

async getCurrentLocation() {
try {
const coordinates = await Geolocation.getCurrentPosition();
const lat = coordinates.coords.latitude;
const lng = coordinates.coords.longitude;

await this.createMap(lat, lng);
} catch (error) {
console.error('Error in function getCurrentLocation', error);
}
}

async createMap(lat: number, lng: number) {
this.newMap = await GoogleMap.create({
id: 'my-test-map',
element: this.mapRef.nativeElement,
apiKey: environment.mapsApiKey,
config: {
center: {
lat: lat,
lng: lng,
},
zoom: 15,
},
});

// Adds marker for current pos
await this.newMap.addMarker({
coordinate: {
lat: lat,
lng: lng,
},
draggable: false,
});
}
}


I've seen some online videos that showed that I needed to add disableDefaultUI: true just below the zoom property, but I get the error: Object literal may only specify known properties, and 'disableDefaultUI' does not exist in type 'GoogleMapConfig'.

I am using:

"@ionic/angular": "^8.0.0",
"@capacitor/geolocation": "^7.1.0",
"@capacitor/google-maps": "^7.0.0",


Any suggestion on how to do this?

Continue reading...