Custom control makes the map jump

[cadilhac]

Adding a custom control (in my case this is a button but it can be a simple unstyled text for the test) in the map creates 2 issues:

• A nasty visual effect. The custom control initially appears in the corner above the zoom buttons during a very short time, then it goes where it has to be placed.
• But what is more serious is that, at the same time, the map kind of jumps a few pixels to the left then back to the right. This visual bug is not nice but it also produces 3 idle events. Note that if I remove the custom control, then the map displays well and creates only one idle event.

Any idea why it does that?

[cadilhac]

The only workaround I found is to set my custom control initially hidden (via css) and add this code when receiving the first idle event:

setTimeout(() => {
    myControlRef.value.style.display = 'block'
}, 500)

Unfortunately this works if I have only one custom control at this position. Two hidden buttons will overlap. Bad for me, I have 2 custom controls.

[HusamElbashir]

Hey @cadilhac

We got some fixes on develop that haven't been released yet that might potentially address this. If you use pnpm can you point your vue3-google-map dependency at git+https://github.com/inocan-group/vue3-google-map#develop see if it fixes the issue? Otherwise you can share a reproduction on https://vite.new/vue and I'll take a look

[JoseGoncalves]

Hi @cadilhac, I have a fork of this project that you can use to follow @HusamIbrahim sugestion. Version 0.19.0 of @josempgon/vue3-google-map was built with the latest (unpublished) code from develop.

[cadilhac]

I have some difficulties reproducing the original issue (the jump) so it's difficult to test right now. As soon as I can, I will report. However, I can tell that with the mentioned fork 0.19.0, the custom control still briefly appears in the corner before being displayed at the final position.

[HusamElbashir]

Closing due to inactivity