Ionic-native-google-maps: ERROR TypeError: Cannot read property 'offsetHeight' of undefined

[sverdlov]

I'm submitting a ... (check one with "x")

• [ ] question
• [X] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [X] Android
• [X] iOS
• [X] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.4.3 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.1.4 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/core": "^5.0.0-beta.17",
"@ionic-native/google-maps": "^5.0.0-beta.21",

Current behavior:

Using the tutorial materials provied at this link I've created a fresh project using Ionic Framework 4. Upon launch the following error appears in console:

core.js:1449 ERROR TypeError: Cannot read property 'offsetHeight' of undefined
    at index.js:1026
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at e.invokeTask (polyfills.js:3)
    at i.isUsingGlobalCallback.invoke (polyfills.js:3)
    at n (polyfills.js:3)

Expected behavior:

According to the tutorial provided it should work out of the box.

* Research done: *
After careful examination of this issue, I've found out that the problem lies within line 1010 of index.js of Ionic-native/google-maps

var targets = document.querySelectorAll('ion-router-outlet #' + element);
I use NavController instead of Ionic Router outlet, thats why my DOM don`t have element. So targets will be empty.

Can you fix that?

[wf9a5m75]

Please share your project files on GitHub.

[sverdlov]

Please share your project files on GitHub.

https://github.com/sverdlov/mapTest

[wf9a5m75]

Thank you for sharing example project.
I just let you know, you need to use @ionic-native/core@beta instead of @ionic-native/core for ionic v4 beta.

• wrong: "@ionic-native/core": "^4.12.2"
• correct: "@ionic-native/core": "^5.0.0-beta.17"

https://github.com/sverdlov/mapTest/blob/5cf7d6f82b4e57cdd6c94fd400106e010ecd44be/package.json#L23

I'm checking your project now.

[sverdlov]

I'll try again to be sure, but I've already tried it and had the same error

[wf9a5m75]

I already confirmed your issue, and I'm trying to fix the problem. Your inspection is correct.

[wf9a5m75]

Fixed: Please reinstall the @ionic-native/[email protected] plugin

[sverdlov]

Fixed: Please reinstall the @ionic-native/[email protected] plugin

Now it works. Thank you so much)

[dekonunes]

I'm with this problem, using @ionic-native/[email protected], "@ionic-native/core": "^5.0.0-beta.20" and not 22 but ok right?

I'm made one change of official doc, import using @ionic-native/google-maps/ngx because when i'm use without ngx don't work and others native libs using ngx too.

My project are large and have login and password, but I will paste some important code here:

app.module.ts

import { GoogleMaps } from '@ionic-native/google-maps/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';

providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    Geolocation,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ]

map.component.html
<div id="map_canvas"></div>

map.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { GoogleMap, GoogleMaps } from '@ionic-native/google-maps';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  map: GoogleMap;

  constructor(private platform: Platform,
    private googleMaps: GoogleMaps) { }

  ngOnInit() {
    this.platform.ready().then(() => this.loadMap());
  }

  loadMap() {
    this.map = this.googleMaps.create('map_canvas');
  }
}

map.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MapComponent } from './map.component';

@NgModule({
  declarations: [MapComponent],
  imports: [CommonModule],
  exports: [MapComponent]
})

Can you help me with this information?

[dekonunes]

Found the problem, using 90% height in my case don't work, change to 150px and worked.

[francovp]

I'm getting this error now

Using:

"@ionic-native/core": "^5.0.0-beta.22",
"@ionic-native/google-maps": "^5.0.0-beta.25",

Importing from @ionic-native/google-maps/ngx

SCSS:
#map_canvas { width: 100%; height: 500px; }

[amisra24x7]

I'm getting this error now

Using:

"@ionic-native/core": "^5.0.0-beta.22",
"@ionic-native/google-maps": "^5.0.0-beta.25",

Importing from @ionic-native/google-maps/ngx

SCSS:
#map_canvas { width: 100%; height: 500px; }

I am getting the same issue. I have tried everything from re-installing all components and libraries to making changes with the css/scss from 100% to 500 px. I am trying to put the div on a modal.

[whiskerandpaw]

I'm getting this error now
Using:

"@ionic-native/core": "^5.0.0-beta.22",
"@ionic-native/google-maps": "^5.0.0-beta.25",

Importing from @ionic-native/google-maps/ngx
SCSS:
#map_canvas { width: 100%; height: 500px; }

I am getting the same issue. I have tried everything from re-installing all components and libraries to making changes with the css/scss from 100% to 500 px. I am trying to put the div on a modal.

Any updates on this?

[Axdron]

I'm having the same problem when trying to use the div inside a modal. In a normal page, works fine...

[wf9a5m75]

You can not use this plugin in a modal.

[amisra24x7]

Okay. Any way how I can implement it in a fixed way all across the application? - Modal or non modal?

[wf9a5m75]

This plugin displays the map view under the webview(browser).

You can not use this plugin in modal anyway.