Ionic capacitor google maps setMapType not working - google-maps

Question

I am using GoogleMap from #capacitor/google-maps plugin. I am trying to change the map type from Normal to Satellite. But this is not working.
await this.map.setMapType(MapType.Satellite);

Answer 1

I have recently found solution for this issue. Integrate 2 separate functions for browser and native devices.
For browser:
async createMapForWeb(map: ElementRef) {
this.map = await GoogleMap.create({
id: "capacitor-google-maps",
element: map.nativeElement,
apiKey: environment.browserKey,
config: {
zoom: 18,
mapTypeControl: false,
center: {
lat: this.location.lat,
lng: this.location.lng,
},
mapTypeId: "satellite",
disableDefaultUI: true,
},
forceCreate: true,
});
}
For native devices:
async createMapForDevice(map: ElementRef) {
this.map = await GoogleMap.create({
id: "capacitor-google-maps",
element: map.nativeElement,
apiKey: environment.browserKey,
config: {
zoom: 18,
mapTypeControl: false,
center: {
lat: this.location.lat,
lng: this.location.lng,
},
disableDefaultUI: false,
},
forceCreate: true,
});
await this.map.setMapType(MapType.Satellite);}

Answer 2

Extending Ariyan Ashfaque's answer below:
You can make use of Capacitor.isNativePlatform() to identify browser / native device.
import { Capacitor } from '#capacitor/core';
const createMap = async () => {
if (!mapRef.current) return;
if (Capacitor.isNativePlatform()) {
console.warn('Native Platform Map');
newMap = await GoogleMap.create({
id: 'google-map',
element: mapRef.current,
apiKey: CONFIG.GOOGLE_MAPS_API_KEY,
config: mapConfig,
forceCreate: true,
});
await newMap.setMapType(MapType.Satellite);
await newMap.enableCurrentLocation(true);
} else {
console.warn('Browser Map');
newMap = await GoogleMap.create({
id: 'google-map',
element: mapRef.current,
apiKey: CONFIG.GOOGLE_MAPS_API_KEY,
config: mapConfig,
forceCreate: true,
});
}
await newMap.addMarker({
coordinate: {
lat: props?.geoLocation?.latitude,
lng: props?.geoLocation?.longitude,
},
title: 'Marker Title',
});
await Geolocation.getCurrentPosition();
};