@google-maps Page scrolling on Android = dead alley

[thor9n]

Bug Report

On Android the native google map positioning disturbs the scrolling experience, which supposedly is a known bug or 'side effect' of the current Android implementation.

→ Video of the problem
→ Discussion about the problem

The real issue

Since I don't think the implementation will be changed in the near future, the most natural fix would be to use the JS implementation for Android users – but that raises the following issues:

1. The Google Maps library is not fully (and correctly) implemented

• Using the plugin I would need specify that the JS version to be used on Android as a config parameter. I can't see that this is possible reading the plugin documentation.
• I should be able to pass the disableDefaultUI: true parameter to declutter the map UI and mimic the native experience.
• Many types are not implemented according to the Google Maps types, causing unexpected errors and behaviours

2. There's no straight-forward way to target only Android devices

Another alternative is simply to load a different component using the native JS library on Android platforms. But as far as I know, there's no straight forward (or native) way to differentiate between the different platforms.

Recommended solutions

What's the recommended solutions on this topic? Even though this isn't a bug per say, I would argue it's an issue.

Thanks in advance

[miguel2211]

Hello, did you find a solution? I also found that this plugins works perfectly fine on iOS and Web, but Android.

[thor9n]

My current solution is to use Javascript library if it's an Android:

1 - Check if it's an Android or not:

import { isPlatform } from "@ionic/vue"
    is_android() {
      return isPlatform("android") && !isPlatform("mobileweb")
    },

2 – Load @/components/map/map-view-android-fallback.vue with:

onMounted(async () => {
  if (!window.google?.maps) await init_google_maps()
  //...
})

const init_google_maps = async () => {
  return new Promise((resolve, reject) => {
    gmaps_loader = document.createElement("script")
    gmaps_loader.setAttribute("src", `https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX&libraries=&v=weekly`)
    gmaps_loader.async = true
    document.head.appendChild(gmaps_loader)
    gmaps_loader.addEventListener("load", () => {
      resolve()
    })
  })
}

It's only temporary solution but I think the whole plugin needs a rewrite to be honest.

Hope it helps!