google_maps_flutter_web 0.5.10 
google_maps_flutter_web: ^0.5.10 copied to clipboard
flutter.devWeb platform implementation of google_maps_flutter
google_maps_flutter_web #
The web implementation of google_maps_flutter.
Powered by a14n's google_maps Dart JS interop layer.
Usage #
This package is endorsed,
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.
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 #
Get an API Key for Google Maps JavaScript API. Get started here.
Modify the <head> tag of your web/index.html to load the Google Maps JavaScript API, like so:
<head>
<!-- // Other stuff -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
The Google Maps Web SDK splits some of its functionality in separate libraries.
If your app needs the drawing library (to draw polygons, rectangles, polylines,
circles or markers on a map), include it like this:
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>
To request multiple libraries, separate them with commas:
<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.
Marker clustering #
If you need marker clustering support, modify the tag to load the js-markerclusterer library. Ensure you are using the currently supported version 2.5.3, like so:
<head>
<!-- // Other stuff -->
<script src="https://cdn.jsdelivr.net/npm/@googlemaps/markerclusterer@2.5.3/dist/index.umd.min.js"></script>
</head>
Heatmaps #
To use heatmaps, add &libraries=visualization to the end of the URL. See the documentation for more information.
Limitations of the web version #
The following map options are not available in web, because the map doesn't rotate there:
compassEnabledrotateGesturesEnabledtiltGesturesEnabled
There's no "Map Toolbar" in web, so the mapToolbarEnabled option is unused.
There's no "My Location" widget in web (tracking issue), so the following options are ignored, for now:
myLocationButtonEnabledmyLocationEnabled
There's no defaultMarkerWithHue in web. If you need colored pins/markers, you may need to use your own asset images.
Indoor and building layers are still not available on the web. Traffic is.
Only Android supports "Lite Mode", so the liteModeEnabled constructor argument can't be set to true on web apps.
Google Maps for web uses HtmlElementView to render maps. When a GoogleMap is stacked below other widgets, package:pointer_interceptor must be used to capture mouse events on the Flutter overlays. See issue #73830.
Supported Heatmap Options #
| Field | Supported |
|---|---|
| Heatmap.dissipating | ✓ |
| Heatmap.maxIntensity | ✓ |
| Heatmap.minimumZoomIntensity | x |
| Heatmap.maximumZoomIntensity | x |
| HeatmapGradient.colorMapSize | x |
Metadata
Publisher
Metadata
Web platform implementation of google_maps_flutter
Repository (GitHub)
View/report issues
Contributing
Topics
#google-maps #google-maps-flutter #map
Documentation
License
BSD-3-Clause, MIT (license)
Dependencies
collection, flutter, flutter_web_plugins, google_maps, google_maps_flutter_platform_interface, sanitize_html, stream_transform, web
