Google Map absorbing clicks to elements higher in a stack

[randomdude583]

I have a Stack with a button and a GoogleMap. When I click the Button, the onTap from the button AND the GoogleMap fire.

EDIT - It seems to work fine on Mobile, This problem occurs when building for web.

stack(
    children: [
        Positioned.fill(
            child: GoogleMap(
                key: _key,
                markers: Set(),
                onTap: (pos){print("Map Click");},
                onLongPress: (pos){print("Map Long Click");},
                initialPosition: GeoCoord(43.589, -116.405),
            )
        ),

        RaisedButton(
            onPressed: (){print("Button click");}, 
                child: Text("Text")
         ),
    ]
)

When moving the cursor over the button, the cursor stays the same, rather than converting back to the default cursor, and when clicking the button, both children fire their onTap events.

How do I stop this behavior from occuring?

Thanks!

[Pizzacorn]

I have a similar problem too, I have a Container over the Map in a Stack, when I click in the Container elements, the OnTap of the Container and the OnTap of the map fire at the same time.

Also happens with cursors, when I put a Button which is over the Map, the cursor doesn't change, always appears the hand cursor even though you put another one.

[randomdude583]

@Pizzacorn, Yep, that sounds exactly like the behavior that I am seeing.

[randomdude583]

Is there any update on this issue? I would really like to use this in my next roll out.

Thanks,

[dhs9004]

I'm having similar issues when I tried to use Marker/onInfoWindowTap on web

[bobppsureway]

Same issue. I have a Drawer with ListView, drag listview up and down GoogleMap interactive will fire. Tap ListTiles or any other buttons in Drawer GoogleMap Marker/oninfoWindow onTap or will fire. Try to setState on map interactive false doesn't work. Try to use transparent Container or GestureDetecor on top layer doesn't work. Flutter web user waiting for updates.

[randomdude583]

I've been looking into this, and it isnt local to this repository. This repo uses the google_maps plugin to generate the map for web, and it has the same problem. There is also this repository, which is a early development version of the google_maps_flutter plugin from the flutter.dev team. It has some features that this repo does not have, but also has a lot of missing features, and also has the transparent click issue, as it is built using the same base plugin.

Hope this helps somebody

[joaquini]

Wow! I'm with the same issue in web.

I tried wrapping the GoogleMap widget into a IgnorePointer widget and same happens. Somehow, web native GoogleMap is always consuming view events. In Android it works fine (No action allowed at all when wrapped with an IgnorePointer).

[randomdude583]

@joaquini, yep, I tried the IgnorePointer as well. Its definitely the JS google map that is consuming all of the touch events. The problem persists in other libraries implementing the google_maps library here

[davidjan3]

This issue is still reproducible, and makes this plugin mostly unusable in web applications, since you can't properly put any controls on top of the map.

[tomrozb]

This issue is still reproducible, and makes this plugin mostly unusable in web applications, since you can't properly put any controls on top of the map.

This is a bug in flutter with iframes and will be fixed in framework. We have to wait or look for a good workaround

[joaquini]

This is a bug in flutter with iframes and will be fixed in framework. We have to wait or look for a good workaround

Do you have a link with official info about the progress on this?

[tomrozb]

This is a bug in flutter with iframes and will be fixed in framework. We have to wait or look for a good workaround

Do you have a link with official info about the progress on this?

https://github.com/flutter/flutter/issues/54027

[yurisasc]

I'm facing the same issue, is there a possible workaround for this?

[Scott1803]

Does anyone have an update on this? I am getting this exact behaviour and cant seem to find any fixes or workarounds

[DannyJoinedApps]

Not that anyone is in any doubt but I'll add a plus one. I too have this. Stacks and google maps just don't seem to mix. Not just capturing, or rather listening to all mouse or touch events, but it even stops the cursor changing, e.g. and inkwell on a widget higher in the stack wont cause the cursor to change appropriately. Real shame as screen real estate such a massive issue that hovering buttons over the top of the map is a huge help and while the buttons do also capture a click (any widget requiring a drag gesture is definitely not usable, but single taps are just about okay except...) those widgets don't give a different cursor on mouse-driven devices, so users (especially old ones who don't just try tapping) are convinced a button isn't a button.

[DannyJoinedApps]

This: https://pub.dev/packages/pointer_interceptor Has got round the problem completely for me.