ionic-team / ionic-team/capacitor-google-maps

Google Maps not loading on iOS (physical device)

Open
#108 32 comments 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
32
Forks
47
PR merge metrics
No merged PRs in 30d

Description

## 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 = `

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


`;

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
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.