[google_maps_flutter_web] Endorse Google Maps plugin for Web

[domesticmouse]

Tracking bug for implementing support for TargetPlatform.macOS in the Flutter Google Maps Plugin for Web.

A workaround would also be good, if appropriate.

[stuartmorgan]

Can you elaborate on what this means? I don't see any reference to TargetPlatform in the web plugin. (I'm not even sure what TargetPlatform does in a web build...)

[domesticmouse]

Attempting to run the Flutter Google Maps hello world sample on macOS 11.2.3 (20D91) with Chrome 89.0.4389.128 gives the following visual output:

Repro case:

code sample

```dart import 'dart:async'; import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MapSample(), ); } } class MapSample extends StatefulWidget { @override State createState() => MapSampleState(); } class MapSampleState extends State { Completer _controller = Completer(); static final CameraPosition _kGooglePlex = CameraPosition( target: LatLng(37.42796133580664, -122.085749655962), zoom: 14.4746, ); static final CameraPosition _kLake = CameraPosition( bearing: 192.8334901395799, target: LatLng(37.43296265331129, -122.08832357078792), tilt: 59.440717697143555, zoom: 19.151926040649414); @override Widget build(BuildContext context) { return new Scaffold( body: GoogleMap( mapType: MapType.hybrid, initialCameraPosition: _kGooglePlex, onMapCreated: (GoogleMapController controller) { _controller.complete(controller); }, ), floatingActionButton: FloatingActionButton.extended( onPressed: _goToTheLake, label: Text('To the lake!'), icon: Icon(Icons.directions_boat), ), ); } Future _goToTheLake() async { final GoogleMapController controller = await _controller.future; controller.animateCamera(CameraUpdate.newCameraPosition(_kLake)); } } ```

[pedromassangocode]

I cannot reproduce this on latest version of the plugin. I'm not sure if my setup is the right one to reproduce this. Your flutter doctor -v would be useful!

flutter doctor -v

```bash [✓] Flutter (Channel master, 2.2.0-11.0.pre.187, on macOS 11.2.3 20D91 darwin-x64, locale en-AO) • Flutter version 2.2.0-11.0.pre.187 at /Users/pedromassango/Code/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 5526dcc24b (4 hours ago), 2021-04-20 22:34:02 -0700 • Engine revision 610fd039ae • Dart version 2.14.0 (build 2.14.0-18.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/pedromassango/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [!] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e ! CocoaPods 1.9.3 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • 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 1.8.0_242-release-1644-b3-6915495) [✓] IntelliJ IDEA Community Edition (version 2021.1) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 55.1.5 • Dart plugin version 211.6693.108 [✓] VS Code (version 1.55.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.16.0 [✓] Connected device (3 available) • sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 11 (API 30) (emulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.2.3 20D91 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.128 ! Doctor found issues in 1 category. ```

[stuartmorgan]

Attempting to run the Flutter Google Maps hello world

I assume this means the example app in google_maps_flutter? As indicated on pub.dev, that package currently only supports iOS and Android. See also https://pub.dev/packages/google_maps_flutter_web#depend-on-the-package

@ditman Is there an issue tracking endorsing Maps for web?

[ranahyder87]

I can see the plugin google_maps_flutter_web does not have GoogleMap and other things, so the dart code is taking these elements from google_maps_flutter. Or I'm not sure how to implement the plugin google_maps_flutter_web

[domesticmouse]

@pedromassango here ya go:

$ flutter doctor -v
[✓] Flutter (Channel beta, 2.2.0-10.1.pre, on macOS 11.2.3 20D91 darwin-x64,
    locale en)
    • Flutter version 2.2.0-10.1.pre at /Users/brettmorgan/flutter
    • Framework revision 0941968447 (6 days ago), 2021-04-15 12:01:02 -0700
    • Engine revision d2a2e93510
    • Dart version 2.13.0 (build 2.13.0-211.6.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/brettmorgan/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.0

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

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • Brett's iPhone (mobile) • 00008020-000A781A0C46002E • ios            • iOS 14.4.2
    • macOS (desktop)         • macos                     • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)            • chrome                    • web-javascript • Google Chrome 90.0.4430.85

• No issues found!

[ditman]

@ditman Is there an issue tracking endorsing Maps for web?

@stuartmorgan Not that I can find, we can repurpose this one.

There's some instructions on how to use google_maps_flutter_web in its README, but those are getting a little bit stale (specially with versioning). We should update the docs about "Web Integration" in the main README, to at least point users to modifying their index.html with the SCRIPT tag at the bare minimum.

@domesticmouse I have an updated version of the example app (with little-to-no modifications) deployed here: https://dit-maps-tests.web.app (I deploy this manually, so it might get stale from time to time)

Here's another app with Google Maps Web: https://dit-tests.web.app (this might change because I use it to test miscellaneous stuff from time to time)

Here's the relevant dependencies on the second app's pubspec.yaml:

  google_maps_flutter: ^2.0.3
  google_maps_flutter_web: ^0.3.0 
  pointer_interceptor: ^0.9.0 # So the fAB doesn't cause a click on the Map.

Since google_maps_flutter_web is not officially endorsed yet, the web platform is not available on your app unless you depend on the _web plugin directly.

[stuartmorgan]

Can we document the blockers for endorsement here?

[ditman]

Can we document the blockers for endorsement here?

@stuartmorgan I don't think there are any significant blockers for endorsement, other than some missing features that might break. (Check the example app deployed above).

We should do a gap analysis and see if we feel comfortable endorsing a plugin that doesn't have 100% feature parity with the mobile version, and that might throw some exceptions from time to time because of it.

(Some of the current limitations are documented in the README.md of the plugin, btw, I can't remember if the list there is 100% exhaustive)

[domesticmouse]

I don't believe it is worth blocking this endorsement on lack of parity. We should document what works where so developers aren't surprised, but I believe this Google maps on web capability is worth releasing.

[ditman]

IMO, I think we should endorse too. Non-endorsement of web plugins comes from a time where the testing support was not very good, but now that everything is rather well tested (and running in CI), we should do it.

[ditman]

I'll get this endorsed by EOW; I'll also check what other web plugins should be endorsed but aren't yet, and endorse them (@balvinderz recently endorsed image_picker_for_web, for example)

[stuartmorgan]

We should do a gap analysis and see if we feel comfortable endorsing a plugin that doesn't have 100% feature parity with the mobile version, and that might throw some exceptions from time to time because of it.

I'm fine with not having parity yet; I do think we should evaluate the specific behavior for the missing functionality to make sure it's reasonably clear about being missing, rather than buggy.

[ditman]

I attempted to do this, and the current issue is that the integration tests of the google_maps_flutter package can't run on the web, because there's a "test-only" method channel, here:

https://github.com/flutter/plugins/blob/master/packages/google_maps_flutter/google_maps_flutter/example/integration_test/google_map_inspector.dart

That is used to inspect "private" things of the internal state of the map. That should be either:

• Modeled as a platform-interface available for testing, or
• Implemented in the web, when it is in testing mode (I prefer this second option) stuartmorgan: we should never be assuming that a plugin implementation must use a specific method channel (or method channels at all).

(There's also this FakeMapsController that has its own channel, and that will probably break unit tests when run in --platform=chrome)

[stuartmorgan]

• Modeled as a platform-interface available for testing

This is definitely the right solution for federation; we should never be assuming that a plugin implementation must use a specific method channel (or method channels at all).

[ditman]

This is definitely the right solution for federation; we should never be assuming that a plugin implementation must use a specific method channel (or method channels at all).

@stuartmorgan yeah, you're probably right. Maybe it makes sense to make those secret "testing-only" methods available for all, they do have a use, and they probably help make apps less "stateful" with regards to the maps widget.

If we only do a platform interface "for testing" this is going to be slightly more complex, I'm not sure we've ever extended a basic platform interface to add more methods before (maybe doable with extension methods?)

Anyway, this is probably the biggest hurdle WRT endorsing the google maps web plugin.

[stuartmorgan]

Maybe I haven't thought this through all the way, but if it's test-only I would expect it could be a completely separate thing that just happens to look structurally similar to a plugin platform interface (i.e., has an abstract interface that the tests are written against, and platform implementations that can be registered as the instance).

[ditman]

I would expect it could be a completely separate thing that just happens to look structurally similar to a plugin platform interface

@stuartmorgan yes, however for web, it needs to have access to a (very private) internal instance of the GoogleMaps object that is going to eventually handle most of the calls. I haven't put much thought into this either, so it might end up being super simple to solve!

[domesticmouse]

I'd like to add Flutter for Web support to the Adding Google Maps to a Flutter app codelab. Should I document adding google_maps_flutter_web as a dependency or should I wait until this package is federated?

[ditman]

Should I document adding google_maps_flutter_web as a dependency or should I wait until this package is federated?

Please, do document adding the web dependency, I haven't had time to look at the next steps for this yet.

[domesticmouse]

I've added instructions for web to the Google Maps codelab. Thanks!

[ditman]

Thanks for doing that @domesticmouse, and apologies for the inconvenience!! :/

[RoarGronmo]

Ehh... not to put salt in any wound here... ...but is there hope for Google Maps on Desktop, since there is some kind of hope in the sentence "TargetPlatform.windows is not yet supported by this maps plugin" ?

[stuartmorgan]

@RoarGronmo This issue is about web; please file a new issue for the desktop platform you want to request support for (currently only macOS has been filed).

[ditman]

I should have a PR ready this week.

[ditman]

The web version of Google Maps is now endorsed!

https://pub.dev/packages/google_maps_flutter/changelog#230

(From v 2.3.0)

[github-actions[bot]]

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.