bug: The map does not appear

[loicparent]

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

[scanscraps]

If you haven't been able to make this work for ios, please make the following changes to your test code:

Change: @ViewChild('mapRef') set mapRef(ref: ElementRef<HTMLElement>) { this.mapRefEl = ref.nativeElement; } To: @ViewChild('mapRef', {static: true}) ref: ElementRef<HTMLElement>;

Change: ngAfterViewInit() { this.createMap(this.mapRefEl); }

To: async ngAfterViewInit(){ setTimeout(()=> {this.createMap(this.ref.nativeElement);}, 700); //not a best practice but it makes the plugin work }

This should do it.

[loicparent]

Hello @scanscraps,

Thank you for the reply :)

I just test it but unfortunately I don't see any changes and so the map doesn't appears 😕

I see this one in the console of xCode:

To Native ->  CapacitorGoogleMaps create 29449729
⚡️  TO JS undefined

And I see this one in the safari console of the simulator:

[BrandonBatt3]

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

[strttn]

I think it is that the map relies on mapRefEl.nativeElement having been created in the DOM.

I set up a polling function that checks if mapRefEl.nativeElement is undefined or not, polling every 50ms. As soon as it is defined I continue with the call to createMap and then it works.

[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.

[loicparent]

Hello @BrandonBatt3, Sorry for my no-reply… I was on vacations and I have passed next to the notification :(

Hello @jcesarmobile, Yes I confirm that it works now. Thank you for you help :)

Have a nice day! Loïc

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.