Capacitor google map

Capacitor
1

Please describe the question in detail and share your code, configuration, and other relevant info.

I’m getting (randomly) a grey screen instead of the google map (see image). It works sometimes (same device, different day) so it is not the API key. The console doesn’t seem to show any errors. This is a web app, and have it tested on Windows Edge, Chrome Android, etc. and

google maps grey screen
google maps grey screen1876×833 64.4 KB

Any help would be much appreciated

async createMap(){
    this.map = await GoogleMap.create({
      id : 'my-map',
      apiKey : "AIzaSyBheHnjfIcknJdwopZ_kz8h8FQ4BY4G4i0",
      config : {
        "center" : this.center,
        "zoom" : 18
      },
      element : this.mapRef.nativeElement,
      forceCreate : true
      
    })
    this.addMarker(this.center.lat, this.center.lng)
    console.log('map is ready')

  }
2

Do you have an API Limit or quota that you might be exceeding?

3

I don’t see any limit or quota being exceeded. And also checked with two devices at the same time, one presenting the problem and the other working just fine

4

did you add the needed style to the map?

capacitor-google-map {
  display: inline-block;
  width: 275px;
  height: 400px;
}
5

yes, I did add the style you mention. still same issue