Ionic-native-google-maps: Ionic 4 Google maps not working

[abburi03]

Hello,

Thank you for a great plugin. I am facing issues while trying to use Google-maps plugin with IONIC 4.

"Uncaught (in promise): TypeError: Cannot read property 'BaseClass' of null
TypeError: Cannot read property 'BaseClass' of null
at GoogleMap.BaseClass (index.js:241)"

I dont know what I am doing wrong. Here are the dependencies
"@ionic-native/core": "^5.0.0-beta.14",
"@ionic-native/google-maps": "^5.0.0-beta.19",

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

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

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

• [ ] Android
• [x] iOS

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-plugin-add-swift-support 1.7.1 "AddSwiftSupport"
cordova-plugin-advanced-http 1.11.1 "Advanced HTTP plugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-googlemaps 2.4.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.1.0 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 3.1.2 "NativeGeocoder"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
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)

Current behavior:

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

[wf9a5m75]

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g292c767148_0_47

async ngOnInit() {
  await this.platform.ready();
  await this.loadMap()
}

[wf9a5m75]

ping

[abburi03]

Hi,

Now i am getting 'ERROR TypeError: Cannot read property 'offsetHeight' of
undefined'. Even after setting height and width of map div i am getting the
same issue

On Fri, Aug 31, 2018 at 9:45 AM Masashi Katsumata [e-mail]
wrote:

ping

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native-google-maps/issues/60#issuecomment-417723933,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGcq1vlR7u9z1Hie6oSho8nZjWwkgTdlks5uWWhGgaJpZM4WOk57
.

[wf9a5m75]

It means you don't display the div, or @ionic-native/google-maps is old.

[wf9a5m75]

ping

[wf9a5m75]

Since there is no response for a while, I close this thread. But you can still reply anytime.

[vasconcelosvcd]

Hi, I'm having the same issue with Cannot read property 'offsetHeight' of undefined

I'm using "@ionic-native/google-maps": "^5.0.0-beta.23" trying to run on cordova browser and showing the div inside <ion-content>

[dekonunes]

@vasconcelosvcd change height to a fixed, puts 150px and not 90%;

[vasconcelosvcd]

I've already did that, issue continues

[champion007]

Adding this solved my problem - <div style="height: 100%;width: 100%" id="map_canvas"></div> this may help you too :)

[nomanbiniqbal]

If i run application with ng serve then it give me that same error

[wf9a5m75]

You must execute ionic cordova run (browser/android/ios)

[nomanbiniqbal]

but if i run application with
ionic cordova run browser
it runs fine but when i change any thing it dont update auto.

[nomanbiniqbal]

that means its bug right or i m doing some thing wrong

[wf9a5m75]

ionic cordova run browser -l

[wf9a5m75]

Please doubt by yourself first.

[nomanbiniqbal]

Well just find out theres a bug :)
ionic cordova run browser -l
on this command it runs following server.
http://localhost:8000/index.html
and when we refresh code it didnt update it.

[wf9a5m75]

code does not update is not related issue with this plugin.

Please ask at the ionic forum. This is not a Q&A forum.

[mariusbolik]

Same issue.

A few days ago, I think with Ionic Native Core Beta 15 and a few other outdated frameworks, it worked. But now I'm facing the same issue:

The map isn't showing on my Device (iOS).

Ionic CLI: 4.2.1
Ionic Native: Beta 21
Demo Project: https://github.com/mariusbolik/ionic-googlemaps

I hope I can get your awesome plugin up and running quickly.

Best Regards
Marius

[Deliph13]

but if i run application with
ionic cordova run browser
it runs fine but when i change any thing it dont update auto.

did u found the answer

[jbdoster]

style="height: 100%;width: 100%" id="map_canvas"

This worked for me!

I think this especially helps since my GoogleMaps.create() method's first argument is 'map_canvas', so maybe the id didn't link and the HTMLElement instance was null for that reason?

Also I have seen the width and height requirements mentioned in other tutorial videos.

Thank you for this.

[loks15]

map not visible in production release android and ios

[loks15]

thanks it work for me
https://ionic.tutorials24x7.com/blog/implement-google-maps-in-ionic-4-for-android

[mujahid515]

Adding this solved my problem - <div style="height: 100%;width: 100%" id="map_canvas"></div> this may help you too :)

This worked for me!

[rosnaib11]

@champion007 setting

solved mine in ionic 4

[plamouroux]

but if i run application with
ionic cordova run browser
it runs fine but when i change any thing it dont update auto.

did u found the answer

You got to use port 8100 instead of 8000 to benefit from live reload with ionic cordova run browser