The map does not appear (or is empty)

loicparent commented 2 years ago

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:

Install a fresh version of Ionic with Capacitor
Install the plugin @capacitor-community/google-maps
Configure the plugin as indicated in the official doc
Launch the function ionic cap run ios --open and then, open the simulator.
In the simulator the map does not appears.
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

loicparent commented 2 years ago

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 commented 2 years ago

You can read more about adding the map to a modal in these issues: #154 and #161
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

capacitor-community / google-maps

The map does not appear (or is empty) #177

Make sure of this: