bug: The map does not appear

Bug Report

Capacitor Version

Installed Dependencies:

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

Platform(s)

• IOS
• Android

Current Behavior

Hello,

I have installed a fresh version of ionic (blank) and the plugin @capacitor/google-maps. Then, I have followed the instructions here to configure the tool. Finally, when I launch the simulator to test, nothing appears. No error but no map…

Thanks for your help, Loïc

Expected Behavior

The map should appears

Code Reproduction

HTML

<ion-content [fullscreen]="true">
  <div id="container">
    <capacitor-google-maps #mapRef></capacitor-google-maps>
  </div>
</ion-content>

TypeScript code

import { Component, ElementRef, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';

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

  map: GoogleMap;
  mapRefEl = null;
  
  @ViewChild('mapRef')
    set mapRef(ref: ElementRef<HTMLElement>) {
    this.mapRefEl = ref.nativeElement;
  }
  
  constructor() {}
  
  ngAfterViewInit() {
    this.createMap(this.mapRefEl);
  }
  
  async createMap(ref: HTMLElement) {
    this.map = await GoogleMap.create({
      id: 'map-test',
      element: ref,
      apiKey: 'MY-API-KEY',
      config: {
        center: {
          lat: 33.6,
          lng: -117.9
        },
        zoom: 8,
      },
      forceCreate: true,
    });
  }

}

Other Technical Details

npm --version output: 6.14.8 node --version output: v14.15.0 pod --version output (iOS issues only): 1.8.4

###Related topic in the forum

• “capacitor/google-maps” doesn’t appear on mobile devices

[jcesarmobile]

On iOS it’s not working because of a typo on the docs, it’s capacitor-google-map not capacitor-google-maps.

I have fixed it here https://github.com/ionic-team/capacitor-plugins/pull/1221

On Android and web that doesn’t matter, it still works with the typo. For those that it doesn’t work on Android, the usual problems are missing the API key in the manifest (inside the application tag) or the WebView not being transparent.

[BrandonBatt3]

Hi @loicparent, did you figure out what was going on? We are going through the same issue…