flutter/packages
1
0
Fork 0
mirror of https://github.com/flutter/packages.git synced 2025-07-01 23:51:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
David Iglesias
2023-06-05 14:41:12 -07:00
committed by GitHub
parent 81e3428752
commit 3c3c980df1
14 changed files with 165 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md
View File

@ -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 ## 2.2.8
* Fixes unawaited_futures violations. * Fixes unawaited_futures violations.

20
packages/google_maps_flutter/google_maps_flutter/README.md
View File

@ -6,9 +6,11 @@
A Flutter plugin that provides a [Google Maps](https://developers.google.com/maps/) widget. A Flutter plugin that provides a [Google Maps](https://developers.google.com/maps/) widget.
| | Android | iOS | | | Android | iOS | Web |
|-------------|---------|---------| |-------------|---------|---------|----------------------------------|
| **Support** | SDK 20+ | iOS 11+ | | **Support** | SDK 20+ | iOS 11+ | Same as [Flutter's][web-support] |
[web-support]: https://docs.flutter.dev/reference/supported-platforms
## Usage ## 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. * 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 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 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. * 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). 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. You can now add a `GoogleMap` widget to your widget tree.

BIN
packages/google_maps_flutter/google_maps_flutter/example/web/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 917 B

BIN
packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
packages/google_maps_flutter/google_maps_flutter/example/web/icons/Icon-maskable-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

66
packages/google_maps_flutter/google_maps_flutter/example/web/index.html Normal file
View File

@ -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>

35
packages/google_maps_flutter/google_maps_flutter/example/web/manifest.json Normal file
View File

@ -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"
}
]
}

9
packages/google_maps_flutter/google_maps_flutter/pubspec.yaml
View File

@ -2,7 +2,7 @@ name: google_maps_flutter
description: A Flutter plugin for integrating Google Maps in iOS and Android applications. 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 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 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: environment:
sdk: ">=2.18.0 <4.0.0" sdk: ">=2.18.0 <4.0.0"
@ -15,6 +15,8 @@ flutter:
default_package: google_maps_flutter_android default_package: google_maps_flutter_android
ios: ios:
default_package: google_maps_flutter_ios default_package: google_maps_flutter_ios
web:
default_package: google_maps_flutter_web
dependencies: dependencies:
flutter: flutter:
@ -22,9 +24,14 @@ dependencies:
google_maps_flutter_android: ^2.1.10 google_maps_flutter_android: ^2.1.10
google_maps_flutter_ios: ^2.1.10 google_maps_flutter_ios: ^2.1.10
google_maps_flutter_platform_interface: ^2.2.1 google_maps_flutter_platform_interface: ^2.2.1
google_maps_flutter_web: ^0.5.0
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
sdk: flutter sdk: flutter
plugin_platform_interface: ^2.0.0 plugin_platform_interface: ^2.0.0
stream_transform: ^2.0.0 stream_transform: ^2.0.0
# The example deliberately includes limited-use secrets.
false_secrets:
- /example/web/index.html

5
packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md
View File

@ -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 ## 0.5.0
* **BREAKING CHANGE:** Fires a `MapStyleException` when an invalid JSON is used * **BREAKING CHANGE:** Fires a `MapStyleException` when an invalid JSON is used

34
packages/google_maps_flutter/google_maps_flutter_web/README.md
View File

@ -1,15 +1,18 @@
# google_maps_flutter_web # 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 ## 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 However, if you `import` this package to use any of its APIs directly, you
[add it explicitly](https://pub.dev/packages/google_maps_flutter_web/install). should add it to your `pubspec.yaml` as usual.
Once you do, you can use the `google_maps_flutter` APIs as you normally would.
### Modify web/index.html ### Modify web/index.html
@ -26,6 +29,25 @@ Modify the `<head>` tag of your `web/index.html` to load the Google Maps JavaScr
</head> </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. Now you should be able to use the Google Maps plugin normally.
## Limitations of the web version ## Limitations of the web version

3
packages/google_maps_flutter/google_maps_flutter_web/example/pubspec.yaml
View File

@ -20,8 +20,7 @@ dev_dependencies:
flutter_test: flutter_test:
sdk: flutter sdk: flutter
google_maps: ^6.1.0 google_maps: ^6.1.0
google_maps_flutter: # Used for projection_test.dart google_maps_flutter: ^2.2.0 # Needed for projection_test.dart
path: ../../google_maps_flutter
http: ^1.0.0 http: ^1.0.0
integration_test: integration_test:
sdk: flutter sdk: flutter

2
packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml
View File

@ -2,7 +2,7 @@ name: google_maps_flutter_web
description: Web platform implementation of google_maps_flutter description: Web platform implementation of google_maps_flutter
repository: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter_web 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 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: environment:
sdk: ">=2.18.0 <4.0.0" sdk: ">=2.18.0 <4.0.0"