[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 https://github.com/flutter/flutter/issues/80688
diff --git a/packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md b/packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md
index f0c5c78..a0b461f 100644
--- 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
index ea15dfc..b495d0e 100644
--- 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 @@
* 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 @@
}
```
-### 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
new file mode 100644
index 0000000..8aaa46a
--- /dev/null
+++ b/packages/google_maps_flutter/google_maps_flutter/example/web/favicon.png
Binary files differ
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
new file mode 100644
index 0000000..b749bfe
--- /dev/null
+++ b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-192.png
Binary files differ
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
new file mode 100644
index 0000000..88cfd48
--- /dev/null
+++ b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-512.png
Binary files differ
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-192.png b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-192.png
new file mode 100644
index 0000000..eb9b4d7
--- /dev/null
+++ b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-192.png
Binary files differ
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-512.png b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-512.png
new file mode 100644
index 0000000..d69c566
--- /dev/null
+++ b/packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-512.png
Binary files differ
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
new file mode 100644
index 0000000..58522ba
--- /dev/null
+++ 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
new file mode 100644
index 0000000..096edf8
--- /dev/null
+++ 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
index b76ea7b..d1e5770 100644
--- a/packages/google_maps_flutter/google_maps_flutter/pubspec.yaml
+++ b/packages/google_maps_flutter/google_maps_flutter/pubspec.yaml
@@ -2,7 +2,7 @@
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,6 +15,8 @@
default_package: google_maps_flutter_android
ios:
default_package: google_maps_flutter_ios
+ web:
+ default_package: google_maps_flutter_web
dependencies:
flutter:
@@ -22,9 +24,14 @@
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
index e5ce584..4f9eed7 100644
--- 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
index 6c61c5d..b52da95 100644
--- 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).
+
+Powered by [a14n](https://github.com/a14n)'s [google_maps](https://pub.dev/packages/google_maps) Dart JS interop layer.
## Usage
-### Depend on the package
+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`.
-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).
-
-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 @@
</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
index fb4c691..60c6b72 100644
--- 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 @@
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
index c72d96e..9372beb 100644
--- 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 @@
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"
