[google_maps_flutter_web] Implement onTap function in infoWindow

[Sammius]

Since this function is implemented in google_maps_flutter...onTap and not google_maps_flutter_web, this creates difficulties for a certain class of tasks. You have to write completely different codes for the Apps and for the Web.

[darshankawar]

@Sammius
Please provide flutter doctor -v and I think you missed to reference link above (here) so not sure which part are you referring to ?
Thanks.

[Sammius]

Hi @darshankawar!

I added the link.

Regarding flutter doctor -v, this issue is not about a bug but about adding a new feature.

But if you need:)

% flutter doctor -v
[✓] Flutter (Channel master, 1.23.0-8.0.pre.131, on Mac OS X 10.15.7 19H2 x86_64, locale en-CY)
    • Flutter version 1.23.0-8.0.pre.131 at /Users/Sammius/Flutter/flutter
    • Framework revision 8485580bb9 (18 hours ago), 2020-10-04 14:47:02 -0400
    • Engine revision a8d7d97bef
    • Dart version 2.11.0 (build 2.11.0-185.0.dev)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/Sammius/android
    • Platform android-29, build-tools 28.0.3
    • ANDROID_HOME = /Users/Sammius/android
    • ANDROID_SDK_ROOT = /Users/Sammius/android
    • Java binary at: /Library/Java/JavaVirtualMachines/jdk-10.0.2.jdk/Contents/Home/bin/java
    • Java version Java(TM) SE Runtime Environment 18.3 (build 10.0.2+13)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.10.0.rc.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2019.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 39.0.5
    • Dart plugin version 192.7402

[✓] VS Code (version 1.49.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.15.0

[✓] Connected device (2 available)
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 85.0.4183.121

! Doctor found issues in 1 category.

[ditman]

Hey @Sammius, can you add a small example of the code that you want to write? I'm not sure I have a good repro case for this feature.

Thanks!

[Sammius]

Hi @ditman

I just would like to have the same functionality and appearance on Mobile and Web.

There is an onTap function on the Mobile, it would be cool if it works on the Web.

Right now I am doing something like this:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:universal_html/prefer_universal/html.dart' as html;

void main() async {
  runApp(App());
}

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppCore(),
    );
  }
}

class AppCore extends StatefulWidget {
  @override
  _AppCoreState createState() => _AppCoreState();
}
class _AppCoreState extends State<AppCore> {

  var mouseEvent;

  @override
  void initState() {
    mouseEvent = html.document.body.onClick.listen((html.MouseEvent event) {
      if ( event.path[0].toString().contains('#')) {
        final key = event.path[0].toString().split('#').last;
        // my actions
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    mouseEvent.cancel();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: const CameraPosition(target: LatLng(0, 10), zoom: 4),
      markers: [
        Marker(
          markerId: MarkerId('markerId'),
          position: LatLng(0, 10),
          infoWindow: InfoWindow( snippet: ''
            + '<div>text text text</div>'
            + '<br/><a href="#myKey">More >>></a>',
          )
        )
      ].toSet(),
    );
  }
}

It's not like in Mobile, but I can't figure out how to catch the event of clicking on a specific infoWindow.

And in my opinion, it looks very unstable and ugly.

[ditman]

@Sammius so the issue is that the onTap of the InfoWindow class is not working on web? Can you show a snippet of your mobile code?

(I agree that you shouldn't be doing that weird onclick handler)

[Sammius]

@ditman everything is quite simple there:

Marker(
  infoWindow: InfoWindow(
    title: 'title',
    snippet: 'text text text',
    onTap: () {
      //my code
    },
  ),
  markerId: id,
  position: _position,
);

[ditman]

This definitely should work, I'll work on this next. Thanks for reporting!

[ditman]

Turns out the InfoWindow class in the JS SDK of google maps does not have a click event (docs)! I'll have to synthesize it.

[ditman]

The fix for InfoWindows not responding to tap events is published as google_maps_flutter_web: ^0.1.0+5

[ShuoShenDe]

Oh~Hi, anyupdate of the infoWindow onTap event?
It still not working on web.

my google map version:
google_maps_flutter: ^2.0.3
google_maps_flutter_web: ^0.3.0+1

My flutter doctor -v:
[√] Flutter (Channel stable, 2.0.4, on Microsoft Windows [Version 10.0.19042.985], locale en-US)
• Flutter version 2.0.4 at D:\internship\flutter
• Framework revision b139559 (9 weeks ago), 2021-04-01 14:25:01 -0700
• Engine revision 2dce470
• Dart version 2.12.2

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at D:\internship\Android
• Platform android-30, build-tools 30.0.3
• Java binary at: D:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
X Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
• Android Studio at D:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] Connected device (2 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90
• Edge (web) • edge • web-javascript • Microsoft Edge 90.0.818.62

! Doctor found issues in 1 category.

[ditman]

@ShuoShen-Susan please create a new issue here. This should be fixed.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.