[google_maps] Endorses package:google_maps_flutter_web. (#4124)

This PR endorses `package:google_maps_flutter_web` as the implementation of `google_maps_flutter` for the web platform, and updates the relevant documentation. ### Issues * Fixes flutter/flutter#80688
flutter · Jun 5, 2023 · 3c3c980 · 3c3c980
1 parent 81e3428
commit 3c3c980
Show file tree

Hide file tree

Showing 14 changed files with 165 additions and 14 deletions.
diff --git a/packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md b/packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 2.3.0
+
+* Endorses [`google_maps_flutter_web`](https://pub.dev/packages/google_maps_flutter_web)
+  as the web implementation of this plugin.
+
 ## 2.2.8
 
 * Fixes unawaited_futures violations.

diff --git a/packages/google_maps_flutter/google_maps_flutter/README.md b/packages/google_maps_flutter/google_maps_flutter/README.md
@@ -6,9 +6,11 @@
 
 A Flutter plugin that provides a [Google Maps](https://developers.google.com/maps/) widget.
 
-|             | Android | iOS     |
-|-------------|---------|---------|
-| **Support** | SDK 20+ | iOS 11+ |
+|             | Android | iOS     | Web                              |
+|-------------|---------|---------|----------------------------------|
+| **Support** | SDK 20+ | iOS 11+ | Same as [Flutter's][web-support] |
+
+[web-support]: https://docs.flutter.dev/reference/supported-platforms
 
 ## Usage
 
@@ -25,6 +27,7 @@ To use this plugin, add `google_maps_flutter` as a [dependency in your pubspec.y
   * Select "APIs" under the Google Maps menu.
   * To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
   * To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
+  * To enable Google Maps for Web, enable the "Maps JavaScript API".
   * Make sure the APIs you enabled are under the "Enabled APIs" section.
 
 For more details, see [Getting started with Google Maps Platform](https://developers.google.com/maps/gmp-get-started).
@@ -98,7 +101,16 @@ import GoogleMaps
 }
 ```
 
-### Both
+### Web
+
+You'll need to modify the `web/index.html` file of your Flutter Web application
+to include the Google Maps JS SDK.
+
+Check [the `google_maps_flutter_web` README](https://pub.dev/packages/google_maps_flutter_web)
+for the latest information on how to prepare your App to use Google Maps on the
+web.
+
+### All
 
 You can now add a `GoogleMap` widget to your widget tree.
 

diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/favicon.png b/packages/google_maps_flutter/google_maps_flutter/example/web/favicon.png
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-192.png b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-192.png
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-512.png b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-512.png
diff --git a/...google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-192.png b/...google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-192.png
diff --git a/...google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-512.png b/...google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-512.png
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/index.html b/packages/google_maps_flutter/google_maps_flutter/example/web/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Copyright 2013 The Flutter Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>Google Maps Web Example</title>
+
+  <link rel="manifest" href="manifest.json">
+
+  <!-- This API key comes from: go/flutter-maps-web-tests-api-key (GCP project: flutter-infra) -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk&libraries=geometry"></script>
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    const serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: function(engineInitializer) {
+          engineInitializer.initializeEngine().then(function(appRunner) {
+            appRunner.runApp();
+          });
+        }
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/manifest.json b/packages/google_maps_flutter/google_maps_flutter/example/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "example",
+    "short_name": "example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/packages/google_maps_flutter/google_maps_flutter/pubspec.yaml b/packages/google_maps_flutter/google_maps_flutter/pubspec.yaml
@@ -2,7 +2,7 @@ name: google_maps_flutter
 description: A Flutter plugin for integrating Google Maps in iOS and Android applications.
 repository: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
-version: 2.2.8
+version: 2.3.0
 
 environment:
   sdk: ">=2.18.0 <4.0.0"
@@ -15,16 +15,23 @@ flutter:
         default_package: google_maps_flutter_android
       ios:
         default_package: google_maps_flutter_ios
+      web:
+        default_package: google_maps_flutter_web
 
 dependencies:
   flutter:
     sdk: flutter
   google_maps_flutter_android: ^2.1.10
   google_maps_flutter_ios: ^2.1.10
   google_maps_flutter_platform_interface: ^2.2.1
+  google_maps_flutter_web: ^0.5.0
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
   plugin_platform_interface: ^2.0.0
   stream_transform: ^2.0.0
+
+# The example deliberately includes limited-use secrets.
+false_secrets:
+  - /example/web/index.html
diff --git a/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md b/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.5.0+1
+
+* Updates the README to mention that this package is the endorsed implementation
+  of `google_maps_flutter` for the web platform.
+
 ## 0.5.0
 
 * **BREAKING CHANGE:** Fires a `MapStyleException` when an invalid JSON is used

diff --git a/packages/google_maps_flutter/google_maps_flutter_web/README.md b/packages/google_maps_flutter/google_maps_flutter_web/README.md
@@ -1,15 +1,18 @@
 # google_maps_flutter_web
 
-This is an implementation of the [google_maps_flutter](https://pub.dev/packages/google_maps_flutter) plugin for web. Behind the scenes, it uses a14n's [google_maps](https://pub.dev/packages/google_maps) dart JS interop layer.
+The web implementation of [google_maps_flutter](https://pub.dev/packages/google_maps_flutter).
 
-## Usage
+Powered by [a14n](https://github.com/a14n)'s [google_maps](https://pub.dev/packages/google_maps) Dart JS interop layer.
 
-### Depend on the package
+## Usage
 
-This package is not an endorsed implementation of the google_maps_flutter plugin yet, so you'll need to
-[add it explicitly](https://pub.dev/packages/google_maps_flutter_web/install).
+This package is [endorsed](https://flutter.dev/docs/development/packages-and-plugins/developing-packages#endorsed-federated-plugin),
+which means you can simply use `google_maps_flutter` normally. This package will
+be automatically included in your app when you do, so you do not need to add it
+to your `pubspec.yaml`.
 
-Once you do, you can use the `google_maps_flutter` APIs as you normally would.
+However, if you `import` this package to use any of its APIs directly, you
+should add it to your `pubspec.yaml` as usual.
 
 ### Modify web/index.html
 
@@ -26,6 +29,25 @@ Modify the `<head>` tag of your `web/index.html` to load the Google Maps JavaScr
 </head>
 ```
 
+The Google Maps Web SDK splits some of its functionality in [separate libraries](https://developers.google.com/maps/documentation/javascript/libraries#libraries-for-dynamic-library-import).
+
+If your app needs the `drawing` library (to draw polygons, rectangles, polylines,
+circles or markers on a map), include it like this:
+
+```html
+<script
+  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
+</script>
+```
+
+To request multiple libraries, separate them with commas:
+
+```html
+<script
+  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing,visualization,places">
+</script>
+```
+
 Now you should be able to use the Google Maps plugin normally.
 
 ## Limitations of the web version

diff --git a/packages/google_maps_flutter/google_maps_flutter_web/example/pubspec.yaml b/packages/google_maps_flutter/google_maps_flutter_web/example/pubspec.yaml
@@ -20,8 +20,7 @@ dev_dependencies:
   flutter_test:
     sdk: flutter
   google_maps: ^6.1.0
-  google_maps_flutter: # Used for projection_test.dart
-    path: ../../google_maps_flutter
+  google_maps_flutter: ^2.2.0 # Needed for projection_test.dart
   http: ^1.0.0
   integration_test:
     sdk: flutter

diff --git a/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml b/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml
@@ -2,7 +2,7 @@ name: google_maps_flutter_web
 description: Web platform implementation of google_maps_flutter
 repository: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
-version: 0.5.0
+version: 0.5.0+1
 
 environment:
   sdk: ">=2.18.0 <4.0.0"