Ionic 4 + Google Maps

Hello everybody.
I have a very strange problem, which I cannot understand.
I made an APP in Ionic, in which I insert a map with the cordova-plugin-googlemaps 2.7.1 plugin (@ ionic-native / google-maps 5.27.0-beta-20200630)
The strange thing is that if I use the ionic cordova run browser command, I see the map correctly, if instead I create the APK and install it on any phone, the map does not appear. When run on the phone, the error console gives me no indication.
Configuration below:

ngOnInit() {
  
      this.loadMap();
  } // end ngOnInit

  loadMap() {


    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
    };

    this.map = GoogleMaps.create('map', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }
  
Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 10 other plugins)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.2.2) : 1.0.0

System:

   NodeJS : v10.15.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra

Plugins installed

cordova-plugin-add-swift-support 1.7.2 "AddSwiftSupport"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.0.1 "cordova-plugin-ionic-webview"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-streaming-media 2.2.0 "StreamingMedia"
cordova-plugin-whitelist 1.3.3 "Whitelist"

Thanks for your help

Did you set the Google Api Keys for Android and iOS in the config file? What does “does not appear” mean? is it grey?

I set the api key in the config.xml file.

    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="AIzaSyCAmYJG-l87BS8cbRxCepwlAa2A2BYij4A" />

I don’t see anything at all. In the HTML file I have inserted the following code:

and the map-canvas class is as follows:
.map-canvas {
width: 90%;
height: 80vh;
margin: 0 auto;
}

  1. you should not post a api key here^^
  2. if you can create a reproducable repo i can have a look today or tomorrow

Anyway, why don’t I have to insert the API key in the config.xml file?

i am not able to replicate the app … :frowning:

Try to create a new app which just have a map with the same stylings and look if xou can make it run