Plugin map shakes when map is moved

[celron]

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")

• [ ] Android
• [x] iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-device 1.1.7 "Device"
cordova-plugin-googlemaps 2.2.8 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-statusbar 2.4.2-dev "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"
es6-promise-plugin 4.2.2 "Promise"

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:

When an html is 'opened' the map shakes briefly and when the html is closed. Expected behavior:

A smoother transition existed in previous versions of the google maps plugin (2.0.11)

Screen capture or video record: https://photos.app.goo.gl/SRbavibsT3Jw0ADv2

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

If you need to see the code it's possible, however I believe that it's not needed

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Map/README.md#positioning-is-delay-a-little

[celron]

I don't mind the delay, the problem is the jerk or left and right movement before the plugin "centers" this is much like a spring. As I said in 2..0.11 (which I cannot find now) this did not happen. In 2.0.0 which I can load the shake is less pronounced, so something did change.
I can do a slow-mo version of the video

[wf9a5m75]

Please share your project files on GitHub.

[makers-mark]

As I said in 2..0.11 (which I cannot find now) this did not happen.

@celron

You can download version 2.0.11 here.

Then you could unzip it to a folder, and point to that folder in your cordova plugin add <FOLDER YOU UNZIPPED TO>

Alternatively you should be able to simply just add it to your project with:

cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#b0a7599802253bb752bf1c23efdfc741323dd767 --variable API_KEY_FOR_ANDROID="<YOUR KEY>" --variable API_KEY_FOR_IOS="<YOUR KEY>" --nofetch

OR (maybe) with

cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps@2.0.11 --variable API_KEY_FOR_ANDROID="<YOUR KEY>" --variable API_KEY_FOR_IOS="<YOUR KEY>" --nofetch

[celron]

@wf9a5m75 done @makers-mark Thank you, I will try in a bit.

[wf9a5m75]

How should I reproduce the issue?

[celron]

Thank you @makers-mark I will try:

[celron]

Hi @wf9a5m75, you can see everything better on at least an iPad-Air-2. The screen is designed for an iPad pro.

If you click on the bottom "wework" button you a bunch of we markers. Clicking on any of the markers will open the left panel and show the problem. This will happen even if there is no camera animation. The problem will also show if you close the panel by pressing on the reset button or the close button on the panel.

[wf9a5m75]

Running on iPhone SE, the detectBrowser detects this is browser.

[wf9a5m75]

[wf9a5m75]

ping

[celron]

The comment about the platform is a red herring. We use google maps javascript to get the google places to work when using the app.

As for the problem I do not see it when using iPhone SE or iPhone X, only on screens where the map is visible when the panel opens. It appears that it is a problem if the map is viewable when the screen changes.

I have found that the map screen does not shake when I set the css transitions value to 0.

So my question is does the map rely on the css transitions when updating the it's position if the html changes?

[wf9a5m75]

Map is not HTML element. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Map/README.md#how-does-the-plugin-work

[celron]

While the map is not an html element, you must read the dom to determine the size and position of the map.

This shake happens when the transition is set to .4sec... is it possible while the dom is in transition that you update the position/size of the map?

I can see if different values for transition might avoid the shake, but I would like to know a little more on how the update occurs.

I do not need transitions, so technically for me the problem is solved, but transitions is a nice option to have with the map. If you prefer to close this, and concentrate on other issues that would be fine.

[wf9a5m75]

is it possible while the dom is in transition that you update the position/size of the map?

Nop. Transition is a css feature, not native feature.