Google map component on multiple pages in navigation stack

[nitinvsingh]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
I created a component using the ionic-native google maps api. If there are multiple pages in the navigation stack on which this component is used, the map is only interactive on the first page it is used on. All other pages having the map component don't respond to user interaction. The map loads though and is visible too. Android app seems to be working fine. iOS still has the same issue.

Expected behavior:
The component should be interactive on all pages they are used in.

Steps to reproduce:

1. Create a blank ionic project.
2. Create a component using the ionic-native google maps api.
3. Generate two pages and use the map component on both these pages.
4. Navigate from page1 to page2

Related code:

You can refer the git repository https://github.com/nitinvsingh/ionic-googlemaps/tree/develop
Try running the app. You will have two buttons on the home page. Click the Glass Location button to see the problem.

Other information:
A few observations that I would like to share:

1. The component works properly if I include any element in the ion-header or ion-footer of the page. It does not work if I include an element inside the ion-content tag.
2. Also on setting the z-index to 21 of the google map div the component becomes responsive again.
3. If I delete all other pages having the map component from the navigation stack using the safari web inspector the component becomes interactive.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Nitins-MacBook-Pro:ionic-googlemaps nitinsingh$ ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : android 6.3.0 ios 4.5.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.1
npm               : 5.5.1
OS                : macOS High Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : /Users/nitinsingh/Library/Android/sdk/

Misc:

backend : pro

[wf9a5m75]

Try this:

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add cordova-plugin-googlemaps@2.2.4 --variable API_KEY_FOR_ANDROID="..."

[ziedben]

Hello,
I have the same issue, the map works well in the first page however does not work in the second page ( the map appears and there are some deformation in the view ) i m testing it on android

did you find a fix?

thanks

[wf9a5m75]

Try this:
https://github.com/battika/ionic-gmaps-test

[danielsogl]

Reopen the issue here please: https://github.com/ionic-team/ionic-native-google-maps