# google_maps_flutter_web

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

This package is [endorsed](https://flutter.dev/to/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`.

However, if you `import` this package to use any of its APIs directly, you
should add it to your `pubspec.yaml` as usual.

## Setup

1. Get an API Key for Google Maps JavaScript API. Get started [here](https://developers.google.com/maps/documentation/javascript/get-api-key).

2. Add the following to the `<head>` section of `web/index.html`:

   ```html
   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
   ```

   The Google Maps Web SDK splits some of its functionality into
   [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 legacy 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,marker,visualization,places">
     </script>
     ```

## Advanced Markers

The Google Maps SDK provides Advanced Markers, which replace the older legacy markers. Advanced Markers offer improved performance, richer customization (including scalable pins, custom HTML-like content, and styling options), and better behavior on vector maps such as collision management and altitude control. Legacy Marker APIs are deprecated, and new features will only be available through the Advanced Marker system. 

If your app uses Advanced Markers, include `marker` library like this:
```html
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker">
</script>
```

For full details, see Google's official documentation:
https://developers.google.com/maps/documentation/javascript/advanced-markers/overview

## Marker clustering

If you need marker clustering support, modify the <head> tag to load the [js-markerclusterer](https://github.com/googlemaps/js-markerclusterer#install) library. Ensure you are using the currently supported version `2.5.3`, like so:

```html
<head>

  <!-- // Other stuff -->

  <script src="https://cdn.jsdelivr.net/npm/@googlemaps/markerclusterer@2.5.3/dist/index.umd.min.js"></script>
</head>
```

## Heatmaps (Deprecated)

Heatmap support [has been deprecated](https://developers.google.com/maps/deprecations#heatmap-layer-js-deprecation)
in the JavaScript Google Maps API, and was removed in version 3.65 of the SDK. To use
heatmaps, you must pin the SDK to 3.64. This means that you may be missing bug fixes or
newer features.

To use heatmaps, add `&libraries=visualization&v=3.64` to the end of the URL. See [the documentation](https://developers.google.com/maps/documentation/javascript/libraries) for more information.

### Supported Heatmap Options (in 3.64)

| Field                        | Supported |
| ---------------------------- | :-------: |
| Heatmap.dissipating          |     ✓     |
| Heatmap.maxIntensity         |     ✓     |
| Heatmap.minimumZoomIntensity |     x     |
| Heatmap.maximumZoomIntensity |     x     |
| HeatmapGradient.colorMapSize |     x     |

## Limitations of the web version

The following map options are not available in web, because the map doesn't rotate there:

* `compassEnabled`
* `rotateGesturesEnabled`
* `tiltGesturesEnabled`

There's no "Map Toolbar" in web, so the `mapToolbarEnabled` option is unused.

There's no "My Location" widget in web ([tracking issue](https://github.com/flutter/flutter/issues/64073)), so the following options are ignored, for now:

* `myLocationButtonEnabled`
* `myLocationEnabled`

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](https://developers.google.com/maps/documentation/android-sdk/lite)", 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`](https://www.pub.dev/packages/pointer_interceptor) must be used to capture mouse events on the Flutter overlays. See issue [#73830](https://github.com/flutter/flutter/issues/73830).
