Google map not showing in iPhone - Empty page with Google text in bottom of the screen

[TeamBrahma]

Bug Report

Google map not showing in iPhone - Empty page with Google text in bottom of the screen

Plugin(s)

"@capacitor/core": "6.0.0", "@capacitor/google-maps": "^5.4.1", "@capacitor/ios": "^6.0.0"

Capacitor Version

@capacitor/cli: 6.0.0
@capacitor/core: 6.0.0
@capacitor/android: 6.0.0
@capacitor/ios: 6.0.0

Platform(s)

Currently i tried with Iphone 13

Current Behavior

Empty page with Google text in bottom of the screen

Expected Behavior

I want to display google map

Code Reproduction

Other Technical Details

Additional Context

I tried with web and Android it's working fine

[divyesh-savaliya]

Facing the same issue. Is there any update on this?

[viernullvier]

I was facing the same issue and found that it's a common failure mode if the API key is invalid. Generating a new API key that is limited to iOS devices and allow-listed for the correct app bundle identifier fixed the issue.

Note that the same issue appears on Android if an unauthorised API key is set up in AndroidManifest.xml. I haven't tested it for the web platform, but since API keys dedicated to Android / iOS / Web are mutually exclusive and unrestricted API keys are actively discouraged by Google, it is quite likely that an API key that works on the web platform will not work for iOS and vice versa.

[co-dax]

Having the same issue on iOS. It is displaying the markers and the "Google" label in left bottom angle but no actual maps content is displayed. On android is working fine on transparent background(s).

[divyesh-savaliya]

I am able to fix this by passing iOS key in apiKey parameter, I was using javascript key earlier which was causing this issue. Usign iOS key instead of javascript works for me.

const newMap = await GoogleMap.create({
  element: mapRef, // reference to the capacitor-google-map element
  apiKey: apiKey, // <====== google map iOS key
  config: {
    center: {
      // The initial position to be rendered by the map
      lat: 33.6,
      lng: -117.9,
    },
    zoom: 8, // The initial zoom level to be rendered by the map
  },
});

[co-dax]

@divyesh-savaliya what versio fo the plugin are you using? As for iOS googl maps key there is only option to limit access to only specific iOS bundle ids when using iOS restriction. Is that what you refer to by "iOS key"?

[divyesh-savaliya]

As in filter Maps SDK for iOS is not shown, you need to enable it on google console. You can follow this instructions.

[co-dax]

@divyesh-savaliya that's it, thanks! I had not enabled Map SDK for iOS. Now it works. By the way it works with a completely unrestricted key, it was enough to just enable iOS sdk.