Google Maps not loading on iOS (physical device)

[judge]

Bug Report

Plugin(s)

Google Maps

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

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

Installed Dependencies:

  @capacitor/android: not installed
  @capacitor/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/ios: 4.6.1

[success] iOS looking great! 👌

Platform(s)

iOS

Current Behavior

Empty box is appearing instead of Google Maps. Web works perfectly.

Expected Behavior

Show the map.

Code Reproduction

Sample webcomponent (apiKey deleted):

import { GoogleMap } from '@capacitor/google-maps';

const apiKey = '';

window.customElements.define('sample-app', class extends HTMLElement {
  async connectedCallback() {
    this.innerHTML = `
      <style>
        capacitor-google-map {
          display: inline-block;
          width: 200px;
          height: 400px;
        }
      </style>
      <capacitor-google-map id="main-map" style="border: 1px solid red;"></capacitor-google-map>
    `;

    const mapRef = this.querySelector('#main-map');

    const newMap = await GoogleMap.create({
      id: 'my-map',
      forceCreate: true,
      element: mapRef,
      apiKey: apiKey,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }
});

Other Technical Details

When I load the page on web it works fine, on iOS (physical device) I can see an empty box (with the red border I added).

Additional Context

There is no error at all, I can see the following in XCode:

⚡️  [log] - [vite] connected.
⚡️  WebView loaded
⚡️  To Native ->  CapacitorGoogleMaps addListener 26518793
⚡️  To Native ->  CapacitorGoogleMaps create 26518794
⚡️  TO JS undefined

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[DwieDima]

can you change the id to main-map and let me know if the problem still exists?

    const newMap = await GoogleMap.create({
      id: 'main-map', // <--
      forceCreate: true,
      element: mapRef,
      apiKey: apiKey,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });

I was able to render map on ios using this snippet

[judge]

Hi @DwieDima ,
I cannot see the map after the proposed change. :( I uploaded a sample application: https://github.com/judge/sample-app
Thanks!

[naqeeb-klabs]

Hi @judge ,

Did you found any work around for this issue?

[judge]

Unfortunetaly not. I would add "needs reply" and remove "needs reproduction" labels to the issue but I cannot do that. :(

[akeeee]

Hi @judge ,

Did you enabled Maps SDK for iOS ?
https://developers.google.com/maps/documentation/ios-sdk/cloud-setup#enabling-apis

[judge]

Hi @akeeee ,

Yes it is enabled for both JavaScript and iOS. The JavaScript API works perfectly, it even shows request count but there is no request count for iOS.

[Simon54]

It seems that the ScrollView the plugin is searching for is sometimes not existing yet when the map is initialized. I worked around this by changing Map.swift like this:

if let target = self.targetViewController {
    target.tag = 1
    target.removeAllSubview()
    self.mapViewController.view.frame = target.bounds
    target.addSubview(self.mapViewController.view)
    self.mapViewController.GMapView.delegate = self.delegate
} else { // add this else case
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
        self.render(callback)
    }
    return;
}

If you also need your callbacks to wait until the map is created you need to call the resolve at the point that onMapReady is signaled.

[yoaquim]

I'm also facing this issue exactly.

On first use of the map, the "box" and the marker loads, but there's no actual map.

If I navigate to another screen — even if that screen is using maps — I get nothing.

It does work on web; I get the same logs @judge is getting from XCode.

Using:

💊 Capacitor Doctor 💊

Latest Dependencies:

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

Installed Dependencies:

@capacitor/android: not installed
@capacitor/cli: 4.6.3
@capacitor/core: 4.6.3
@capacitor/ios: 4.6.3

[yoaquim]

@judge where you able to find a solution?