The map does not appear (or is empty)

Describe the bug The map is not shown in browser, simulator or native device. I see an error in the console of the simulator: Unhandled Promise Rejection: DataCloneError: The object can not be cloned. from the function postToNative in the main function nativeBridge.

To Reproduce Steps to reproduce the behavior:

1. Install a fresh version of Ionic with Capacitor
2. Install the plugin @capacitor-community/google-maps
3. Configure the plugin as indicated in the official doc
4. Launch the function ionic cap run ios --open and then, open the simulator.
5. In the simulator the map does not appears.
6. Open the console to see the error.

Expected behavior The map should appears without error in the console.

Thanks for your help, Loïc

Screenshots

HTML

<ion-content [fullscreen]="true">
  <div id="map" #map></div>
</ion-content>

SCSS

#map {
  width: 100%;
  height: 100%;
}

TypeScript Code

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

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

@ViewChild('map') mapView: ElementRef;

constructor() {
  CapacitorGoogleMaps.initialize({
    key: "MY-API-KEY",
    devicePixelRatio: window.devicePixelRatio
  });
}

ionViewDidEnter() {
  this.createMap();
}

async createMap() {
  const element = this.mapView.nativeElement;
  const boundingRect = element.getBoundingClientRect() as DOMRect;
  
  let result = await CapacitorGoogleMaps.createMap({
      element: element,
      boundingRect: boundingRect,
      cameraPosition: {
        target: {
          latitude: 33.6,
          longitude: -117.9
        }
      }
    });
    
    element.style.background = "";
    element.setAttribute("map", result.googleMap.mapId);
  }

}

[tafelnl]

1. You can read more about adding the map to a modal in these issues: #154 and #161
2. Yes you can have multiple map instances

But please use the search function / discussions / Stack Overflow for these kind of questions so we can keep everything organized 😃

Closing this issue since it’s solved now

[loicparent]

Hello,

Many thanks for your help @va2ron1!

Ok so after comparing and testing, there are 2 things that was wrong.

First, I didn’t use the css variable to set transparency to the ion-content. So use the css variable instead of the property is ok:

ion-content {
  --background: transparent;
}

Second, the console error related to the cloned element is due to the fact that I had the key element in the “CreateMapOptions” object. So when I remove the key, this is ok:

let result = await CapacitorGoogleMaps.createMap({
  boundingRect: {
   width: Math.round(boundingRect.width),
   height: Math.round(boundingRect.height),
   x: Math.round(boundingRect.x),
   y: Math.round(boundingRect.y),
 },
 cameraPosition: {
   target: {
     latitude: 33.6,
     longitude: -117.9
  }
 }
});

So now, this is ok and I have updated the repository here.

I have an additional question: Is it possible to show the map in a modal and having multiple map instances?

Thanks again 😃 Loïc