Ionic 4 + Google Maps

Ionic Framework
1

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

2

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

3

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

4
  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
5

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:

6

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

7

If you want to implement google maps in Ionic 4 application then read this article. In this tutorial we are not using any plugin, We are using ion2-calendar library.