CODEWITHSUNDEEP
google-mapsionic-frameworkcapacitor
Ariyan Ashfaque
Ariyan Ashfaque

Reputation: 129

Ionic capacitor google maps setMapType not working

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);

Upvotes: 3

Views: 927

Answers (3)

Par Khco
Par Khco

Reputation: 17

“I spent two days on this problem and finally found the solution. If your project is based on Angular and Ionic, my solution is to place the style inside ::ng-deep.” In this way transparent work and map will appear on android device

Upvotes: 0

Syed Arshad
Syed Arshad

Reputation: 106

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();
};

Upvotes: 1

Ariyan Ashfaque
Ariyan Ashfaque

Reputation: 129

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);}

Upvotes: 3

Related Questions