mirror of
https://github.com/flutter/packages.git
synced 2025-07-01 23:51:55 +08:00
[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
This commit is contained in:
David Iglesias
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 917 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -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>
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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,6 +15,8 @@ flutter:
|
||||
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 @@ dependencies:
|
||||
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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 @@ 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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
Reference in New Issue
Block a user