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?

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?

• angular
• google-maps
• ionic-framework
• capacitor

1 Answer 1

After reviewing the official Capacitor documentation in the GitHub repository, it appears that the Ionic team left this property out for whatever reason they have.

You might consider submitting a feature request to see if they will include it. Alternatively, instead of using capacitor-google-maps, you could opt for the official Angular Google Maps component. It's significantly better than the Ionic plugin, offering all features and being mobile-friendly. The disableDefaultUI property is included there.

https://github/angular/components/blob/main/src/google-maps/README.md