Google map is not displaying in iOS

[venkadesh-p]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [x] iOS
• [ ] Browser

ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 12 other plugins)

Utility:

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

System:

   ios-deploy : 1.9.1
   ios-sim    : 8.0.2
   NodeJS     : v10.15.3 (/usr/local/bin/node)
   npm        : 6.14.1
   OS         : macOS Catalina
   Xcode      : Xcode 11.4 Build version 11E146

cordova information:

com.googlemaps.ios 3.8.0 "Google Maps SDK for iOS"
cordova-plugin-android-permissions 1.0.2 "Permissions"
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-email-composer 0.9.2 "EmailComposer"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.7.0 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-unvired-sdk 0.0.1 "UnviredSDK"
cordova-plugin-whitelist 1.3.3 "Whitelist"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"
phonegap-plugin-barcodescanner 8.1.0 "BarcodeScanner"

Current behavior: Google map is displaying in the browser but not displaying in iOS. It is showing a blank screen. I have checked the API key in google Maps console. It is enabled for iOS.

Expected behavior: It should display the map screen in ios.

Screen capture:

Related code:

.html:
<div id="map_canvas"></div>

.scss:
ion-app._gmaps_cdv_ .nav-decor{
    background-color: transparent !important;
}

.ts:
let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: this.latitude,
           lng: this.longitude
         },
         zoom: 18,
         tilt: 30
       }
    };
this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: this.location,
      icon: 'red',
      animation: 'DROP',
      position: {
        lat: this.latitude,
        lng: this.longitude
      }
    });
    this.map.one(GoogleMapsEvent.MAP_READY).then( (data:any) => {
      console.log('map is ready');
    });

    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      // alert('clicked');
    });

[wf9a5m75]

I have no problem at all. Could you add the screenshot for the first step?

[venkadesh-p]

Do you mean the landing page of the app? I am using it as a Modal page.

[venkadesh-p]

I have tried the same by creating a new sample app. Still, it is not working on iOS. But working in the browser. @wf9a5m75 I have attached my sample code. it is a single-page app. please check it.

[wf9a5m75]

Thank you for preparing, but please create a GitHub repo and put your code into them. Because I'm super busy. I can't open the zip file on my phone

[venkadesh-p]

https://github.com/venkadesh-p/Ionic-Sample-Google-Map-iOS @wf9a5m75

[wf9a5m75]

The problem of your code is here.

  ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    this.platform.ready();
    this.loadMap();
  }

You need to wait the this.platform.ready().

  ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

[wf9a5m75]

Works correctly.

[venkadesh-p]

@wf9a5m75 If I use the map in ModalController, the map will not work?

[wf9a5m75]

No. Please understand how this plugin works.

https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md#how-does-this-plugin-work-android-ios

[wf9a5m75]

Check this slide.

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g3e207b82bf_886_0

[venkadesh-p]

ok thanks.

[EinfachHans]

For anyone getting here: You can use GoogleMaps "within" Modals. The hack is to set "display: none" to the ion-router-outlet after the Modal is opened and remove it after the modal gets dismissed