Google Maps does not render on certain devices

[Newbie012]

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

• [X] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic 5.2.9 "cordova-plugin-ionic"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.3 "SocialSharing"
cordova-sms-plugin 1.0.0 "Cordova SMS Plugin"
es6-promise-plugin 4.2.2 "Promise"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^5.0.0-beta.22",
"@ionic-native/google-maps": "^5.0.0-beta.25"

Current behavior:

• MAP_READY is being fired without any errors in the console. Although, I don't see the map, I see a white space (not #FAFAFA as I set as default).
• MAP_DRAG is being fired once when I drag the white space.

I noticed a different behaviors in some devices. I tested the following devices:

• OnePlus 3T - White space.
• Meizu Pro 7 Plus - White space.
• Pixel 2 (AVD) - Displays the map.

Expected behavior:

The map should be displayed for all devices.

Screen capture or video record:

Fails (Meizu Pro 7 Plus)

Succeeds (Pixel 2)

Another thing I've noticed. I've downloaded the sample.apk file from the docs, and this was the result:

But, after moving to a different page, it seemed to worked (in sample.apk, not in my app). I'm really confused.

Related code, data or error log (please format your code or data):

import { Component, OnInit } from '@angular/core';
import { GoogleMap, GoogleMaps, GoogleMapsEvent } from '@ionic-native/google-maps/ngx';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  map: GoogleMap;

  constructor(private platform: Platform) {
    //
  }

  async ngOnInit() {
    await this.platform.ready();

    if (this.platform.is('cordova')) {
      this.map = GoogleMaps.create('map', {
        camera: {
          target: {
            lat: 43.0741704,
            lng: -89.3809802
          },
          zoom: 18,
          tilt: 30
        }
      });

      this.map.one(GoogleMapsEvent.MAP_READY).then(ready => console.log({ready}));
      this.map.one(GoogleMapsEvent.MAP_DRAG).then(drag => console.log({drag}));
    }
  }
}
...
#map {
  background-color: #FAFAFA;
  border-radius: 4px;
  height: 70vw;
}
...
<div id="map"></div>

[wf9a5m75]

Remove background-color: #FAFAFA;

[Newbie012]

Unfortunately, it still does not render the map.

[wf9a5m75]

You need to renegerate a map because map is destroyed when map div is removed.

[Newbie012]

What do you mean by "regenerate"? The map div hasn't been destroyed. It will be destroyed only if navigate to a different page. But if I'll navigate back to the HomePage, then the same process will occur.

[wf9a5m75]

Before asking please read documents

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

[wf9a5m75]

Even if you can't solve the problem, please share your project files on GitHub repository.

[Newbie012]

Before I asked, I read the docs. Including this presentation. I'm still not sure about what you meant in by regenerating (if that what you assumed by "renegerate").

I haven't shared the project profiles since I saw this behavior in the docs itself. Since the project is private, I will share it with you privately, if you that's ok with you.

[wf9a5m75]

I didn't ask you to share your project on public. If you prefer private, I don't mind.

However this is free support. It means supporting is available when I have free time. Unfortunately I don't have much time these days.

You need to wait until I'm ready, or resolve the problem by yourself.

Source code is fully opened ;)

[Newbie012]

Solved it!!!

After days of trying to figure out why it happens, I accidentally rotated my phone. And for one millisecond - I could the map.

I extracted the map element from ion-content, and...... There it is!!! It probably has to do with the Shadow DOM.

I'm so happy :tears-of-joy: :D

[Newbie012]

@wf9a5m75 I think this issue should not be closed yet since it's still a bug. I'm unable to use the maps inside ion-content. Should I open a new issue?

[wf9a5m75]

Please do your best before asking me.

[janrg]

I'm experiencing the same issue. Inside of ion-content, the map div is just white. I'm also seeing the same problems as Newbie012 with the demo app (tested on a OnePlus 3 running Android 8.0 and a Note 9 running Android 8.1.)

[Fresh-Dev-zunairzakir]

Solved it!!!

After days of trying to figure out why it happens, I accidentally rotated my phone. And for one millisecond - I could the map.

I extracted the map element from ion-content, and...... There it is!!! It probably has to do with the Shadow DOM.

I'm so happy :tears-of-joy: :D

@Newbie012 Can you explain extracted the map element from ion-content ?

[Newbie012]

@Fresh-Dev-zunairzakir don't use ion-content