bug: capacitor-google-maps not being displayed

[PuscasAdi]

Bug Report

Capacitor Version

  @capacitor/core: 3.5.1
  @capacitor/ios: 3.5.1

Platform(s)

iOS and Android

Current Behavior

The new official Google Maps plugin has a displaying issue. If it is placed inside an element with colored background (or anything that is not transparent), the map appears behind it. If I remove the parent <div> the map displays and works correctly.

Expected Behavior

The map should behave as other HTML DOMs

Code Reproduction

typescript code:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  // @ts-ignore
  @ViewChild('map') mapRef: ElementRef<HTMLElement>;
  // @ts-ignore
  newMap: GoogleMap;

  async createMap() {
    this.newMap = await GoogleMap.create({
      id: 'my-cool-map',
      element: this.mapRef.nativeElement,
      apiKey: 'API_KEY',
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }

  ngAfterViewInit() {
    this.createMap();
  }
}

HTML code:

<div style="width: 100%; height: 100%; background-color: white">
  <capacitor-google-maps #map style="border: red solid 1px"></capacitor-google-maps>
</div>

Other Technical Details

Please provide the following information with your request and any other relevant technical details (versions of IDEs, local environment info, plugin information or links, etc).

npm --version output: 8.1.2

node --version output: v16.13.2

pod --version output (iOS issues only): 1.11.2

Additional Context

[deving1995]

https://capacitorjs.com/docs/apis/google-maps#:~:text=On%20Android%2C%20the,thing%20you%20check.

If you checked the documentation you'll see that everything must be transparent to see the map.

"On Android, the map is rendered beneath the entire webview, and uses this component to manage its positioning during scrolling events. This means that as the developer, you must ensure that the webview is transparent all the way through the layers to the very bottom. In a typically Ionic application, that means setting transparency on elements such as IonContent and the root HTML tag to ensure that it can be seen. If you can’t see your map on Android, this should be the first thing you check."

[co-dax]

In one app it does work if I comply with https://capacitorjs.com/docs/apis/google-maps#:~:text=On%20Android%2C%20the,thing%20you%20check but it another does not work. There is a defenitely an issue with this plugin.

[gassssty]

Hi guys! I have the same problem and the truth is that I have the with a white background, so I can't change it because I have to make the application myself. How can I put inside the without the map not appearing? Is there any solution apart from removing it from the ?

[deving1995]

I got it working, then upgraded something in Android Studio, and then it broke again, without changing any source code. I am able to make the background transparent all the way to the root (even set the app-root background to red to confirm it would show through).

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

[msohaib308]

This thing works for me `<ion-content [fullscreen]="true">

` `#container { width: 100%; height: 100%; // background-color: white; }

capacitor-google-map { display: inline-block; height: 100%; width: 100%; border: red solid 1px; }

ion-content { --background: none } `

ngAfterViewInit() { setTimeout(async () => { await this.initMap(); }, 700); } async initMap() { this.newMap = await GoogleMap.create({ id: 'my-map', // Unique identifier for this map instance element: this.mapRef.nativeElement, // reference to the capacitor-google-map element apiKey: this.apiKey, // Your Google Maps API Key forceCreate: true, config: { center: { // The initial position to be rendered by the map lat: this.myPosition?.latitude || 32.465058999999997, lng: this.myPosition?.longitude || 74.21373, }, zoom: 16, // The initial zoom level to be rendered by the map }, }, (data: MapReadyCallbackData) => { // console.log(Map initialized ${data.mapId}); }); setTimeout(async () => { // this.newMap.setMapType('Satellite' as any); // await this.newMap.enableTrafficLayer(true) }, 2000); // Add a marker to the map // this.newMap.disableClustering(); }

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