The map does not appear (or is empty)

[loicparent]

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);
  }

}

[loicparent]

I tried with a new blank project and this is the result of the command ionic info:

Ionic:

   Ionic CLI                     : 6.18.1 (/Users/myusername/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.5
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : 3.5.1
   @capacitor/core    : 3.5.1
   @capacitor/ios     : 3.5.1

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.15.0 (/Users/myusername/.nvm/versions/node/v14.15.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Monterey

[tafelnl]

I don't see any obvious mistake here. You do have node v14 installed, you could try and install v16 and see if it works then. It's also wise to take a look at the troubleshooting guide by Capacitor themselves: https://capacitorjs.com/docs/android/troubleshooting

Otherwise I would kindly ask you to share a reproduction (as barebones as possible), so that I can take a look at it.

[va2ron1]

@loicparent I don't see any mistakes, but make sure you have @capacitor-community/google-maps version 2.0.0.beta.x (latest 2.0.0.beta.4)

Also, there're extra steps on iOS. Make sure you had done it.
https://capacitor-community.github.io/google-maps/#/getting-started/installation?id=ios

[loicparent]

Hello @tafelnl & @va2ron1,

Thanks for your replies :)

I just tried with the beta.4 instead of the beta.1 but I don't see any changes. The map doesn't appears and the error in the console is still visible.

I have followed the installation documentation and so change the configuration in xCode to use the CustomMapViewController instead of the CAPBridgeViewController.

You can find here the basic reproduction of my code. (You'll just have to change the API key in the file home.page.ts:15)

[va2ron1]

@loicparent I didn't realize it but you're creating wrong the map. It should be something like this. The element parameter isn't implemented yet.

...
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: {}
});
...

Also two things not related to this plugin:

• You're using 100% for width and height as size of the map, because the is wrapped in the ion-content element the size will be zero, change it to viewport size like the example.
• Because your are using Ionic, you have to set ion-content background transparent.

[loicparent]

Hello @va2ron1,

Thanks for your help!

I just tried but I don't see any changes. The map doesn't appears and the error in the console is still visible.
(There is just the boundingRect (without round) that change).

When I inspect the render in the simulator using the console, I see that the size of the map takes up all the space with the value 100%. I tried also with viewport value (vw, vh) but no changes too.

So the map element stay empty with an error in the console.

[va2ron1]

@loicparent This notes is from a repository that I cloned in order to see and fix your problem. I pushed the changes here

Make sure of this:

• npm install
• (Add your map key)
• ionic cap add ios
• ionic cap sync ios
• ionic cap open ios (will open Xcode and there make sure to change the view controller)
• Run the project on device or simulator.

[tafelnl]

@va2ron1 Thank you very much for helping out! Much appreciated. @loicparent Can you let us know if this solved it for you?

[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

[tafelnl]

1. You can read more about adding the map to a modal in these issues: It doesn't show the map when I try to show the map in a modal #154 and feat(map): allow map instances to be rendered on top of webview #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