[google_maps_flutter_web] Add Advanced markers support (web) #9773

aednlaxer · 2025-08-08T12:51:25Z

This PR adds Advanced markers support to the web implementation of google_maps_flutter.
Approved combined PR: #7882
Approved and merged platform interface PR: #9737
Issue: #155526

Pre-Review Checklist

gemini-code-assist

Code Review

This PR adds support for Advanced Markers to the web implementation of google_maps_flutter. The changes are extensive and well-structured, refactoring the marker handling logic to support both legacy and advanced markers through generics and abstract classes. New tests have been added for the new functionality, and existing ones have been updated. The implementation looks solid, but I've found a couple of critical issues that would prevent the code from compiling or running correctly.

gemini-code-assist · 2025-08-08T12:54:24Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/google_maps_controller.dart

+          clusterManagersController: clusterManagersController!
+              as ClusterManagersController<gmaps.AdvancedMarkerElement>,


There's a typo here. clusterManagersController is used, but it should be _clusterManagersController. This will cause a compilation error as clusterManagersController is not defined in this scope.

clusterManagersController: _clusterManagersController! as ClusterManagersController<gmaps.AdvancedMarkerElement>,

Obviously this does compile, but it does make it order-sensitive to when the private variable is set, which we don't want, so this should use _clusterManagersController.

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

packages/google_maps_flutter/google_maps_flutter_web/lib/google_maps_flutter_web.dart

stuartmorgan-g · 2025-08-19T18:45:51Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/google_maps_controller.dart

+          clusterManagersController: clusterManagersController!
+              as ClusterManagersController<gmaps.AdvancedMarkerElement>,


Obviously this does compile, but it does make it order-sensitive to when the private variable is set, which we don't want, so this should use _clusterManagersController.

packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart

packages/google_maps_flutter/google_maps_flutter_web/lib/src/markers.dart

stuartmorgan-g · 2025-08-19T18:54:11Z

packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml

  sanitize_html: ^2.0.0
  stream_transform: ^2.0.0
-  web: ">=0.5.1 <2.0.0"
+  web: ">=1.0.0 <2.0.0"


This can just be ^1.0.0

stuartmorgan-g · 2025-09-23T18:35:03Z

From triage: @aednlaxer Are you still planning on updating this PR?

stuartmorgan-g · 2025-09-24T14:26:22Z

FYI: After merging in main, you'll need to update the license header in all the new files with a new copy from an existing file, as the format has changed slightly.

aednlaxer · 2025-09-24T14:34:36Z

From triage: @aednlaxer Are you still planning on updating this PR?

Yes, please don't close it

mdebbar

Overall, it looks good to me! I just have a few minor code improvements.

mdebbar · 2025-10-01T14:19:31Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+        options.glyphColor = _getCssColor(circleGlyph.color);
+      case final TextGlyph textGlyph:
+        final web.Element element = web.document.createElement('p');
+        element.innerHTML = textGlyph.text.toJS;


It's safer to use element.text:

Suggested change

element.innerHTML = textGlyph.text.toJS;

element.text = textGlyph.text;

mdebbar · 2025-10-01T14:22:30Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+          element.setAttribute(
+            'style',
+            'color: ${_getCssColor(textGlyph.textColor!)}',
+          );


Suggested change

element.setAttribute(

'style',

'color: ${_getCssColor(textGlyph.textColor!)}',

);

element.style.color = _getCssColor(textGlyph.textColor!);

Element type doesn't have style property:
https://github.com/dart-lang/web/blob/5a7d0be70a258252b95bac6b900f26d6dae4d433/web/lib/src/dom/dom.dart#L3132

mdebbar · 2025-10-01T14:34:50Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+  icon.setAttribute(
+    'style',
+    <String>[
+      if (size != null) ...<String>[
+        'width: ${size.width.toStringAsFixed(1)}px;',
+        'height: ${size.height.toStringAsFixed(1)}px;',
+      ],
+      if (opacity != null) 'opacity: $opacity;',
+      if (isVisible != null) 'visibility: ${isVisible ? 'visible' : 'hidden'};',
+    ].join(' '),


Suggested change

icon.setAttribute(

'style',

<String>[

if (size != null) ...<String>[

'width: ${size.width.toStringAsFixed(1)}px;',

'height: ${size.height.toStringAsFixed(1)}px;',

],

if (opacity != null) 'opacity: $opacity;',

if (isVisible != null) 'visibility: ${isVisible ? 'visible' : 'hidden'};',

].join(' '),

final iconStyle = icon.style;

if (size != null) {

iconStyle

..width = '${size.width.toStringAsFixed(1)}px'

..height = '${size.height.toStringAsFixed(1)}px';

}

if (opacity != null) {

iconStyle.opacity = opacity;

}

if (isVisible != null) {

iconStyle.visibility = isVisible ? 'visible' : 'hidden';

}

Icon type of the web package doesn't have style property either.

Making icon of type HTMLImageElement should make it work.

mdebbar · 2025-10-01T14:46:21Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart

+  });
+
+  @override
+  void initializeMarkerListener({


We typically use the "add listener" terminology in the flutter code base: https://api.flutter.dev/flutter/search.html?q=addlistener

What do you think about renaming this to addMarkerListeners?

I think it's better to keep the naming consistent. I have changed the function name to addMarkerListener.

mdebbar · 2025-10-01T14:46:53Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart

-    if (_infoWindow != null && newInfoWindowContent != null) {
-      _infoWindow.content = newInfoWindowContent;
+    if (onTap != null) {
+      marker.onClick.listen((gmaps.MapMouseEvent event) {


Do we need to unsubscribe from these listeners when the marker is removed?

If yes, it can easily be done:

_subscriptions = [ if (onTap != null) marker.onClick.listen((_) => onTap.call()), if (onDragStart != null) marker.onDragstart.listen((event) { marker.position = event.latLng; onDragStart.call(event.latLng ?? _nullGmapsLatLng); }), ... ];

and later in void remove():

_subscriptions?.forEach((sub) => sub.cancel); _subscriptions = null;

Agreed. 👍

mdebbar · 2025-10-01T14:47:19Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart

+    required VoidCallback? onTap,
+  }) {
+    if (onTap != null) {
+      marker.onClick.listen((gmaps.MapMouseEvent event) {


Same question about unsubscribing from listeners.

mdebbar

Added some suggestions to make element.style and icon.style available.

mdebbar · 2025-10-31T16:40:12Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+    final web.Element icon = web.document.createElement('img')
+      ..setAttribute('src', url);


Let's use a more specific type so we can use icon.style:

Suggested change

final web.Element icon = web.document.createElement('img')

..setAttribute('src', url);

final web.HTMLImageElement icon = web.HTMLImageElement()..src = url;

Thanks for the suggestion. All changes done.

mdebbar · 2025-10-31T16:40:32Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+    final web.Element icon = web.document.createElement('img')..setAttribute(
+      'src',
+      ui_web.assetManager.getAssetUrl(iconConfig[1]! as String),
+    );


mdebbar · 2025-10-31T16:40:46Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+    final web.Element icon = web.document.createElement('img')
+      ..setAttribute('src', web.URL.createObjectURL(blob as JSObject));


mdebbar · 2025-10-31T16:41:22Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+  icon.setAttribute(
+    'style',
+    <String>[
+      if (size != null) ...<String>[
+        'width: ${size.width.toStringAsFixed(1)}px;',
+        'height: ${size.height.toStringAsFixed(1)}px;',
+      ],
+      if (opacity != null) 'opacity: $opacity;',
+      if (isVisible != null) 'visibility: ${isVisible ? 'visible' : 'hidden'};',
+    ].join(' '),


Making icon of type HTMLImageElement should make it work.

mdebbar · 2025-10-31T16:43:36Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+        final web.Element element = web.document.createElement('p');
+        element.text = textGlyph.text;
+        if (textGlyph.textColor != null) {
+          element.setAttribute(
+            'style',
+            'color: ${_getCssColor(textGlyph.textColor!)}',
+          );


Using a HTMLParagraphElement type will allow you to use element.style:

Suggested change

final web.Element element = web.document.createElement('p');

element.text = textGlyph.text;

if (textGlyph.textColor != null) {

element.setAttribute(

'style',

'color: ${_getCssColor(textGlyph.textColor!)}',

);

final web.HTMLParagraphElement element = web.HTMLParagraphElement();

element.text = textGlyph.text;

if (textGlyph.textColor != null) {

element.style.color = _getCssColor(textGlyph.textColor!);

mdebbar

LGTM! Thank you!

stuartmorgan-g · 2025-11-10T16:21:33Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

-  final gmaps.Size gmapsSize = gmaps.Size(size.width, size.height);
-  icon.size = gmapsSize;
-  icon.scaledSize = gmapsSize;
+// Sets the size and style of the [icon] element.


Doc-style (i.e., caller-facing, rather than implementation-detail-describing) comments should still use /// even if the methods aren't public.

stuartmorgan-g · 2025-11-10T16:23:29Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+  BitmapDescriptor bitmapDescriptor, {
+  required double? opacity,
+  required bool isVisible,
+  required double? rotation,


Why are two of these parameters both required and nullable? What does explicitly passing null mean conceptually? This should be explained in the doc comment.

stuartmorgan-g · 2025-11-10T16:26:09Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+      ..visibility = isVisible ? 'visible' : 'hidden'
+      ..opacity = opacity?.toString() ?? '1.0'
+      ..transform = rotation != null ? 'rotate(${rotation}deg)' : '';
+    return htmlElement;


These implementations are all quite long, which makes it hard to see the overall structure of the method being essentially a switch on bitmapDescriptor. This would be much easier to follow if each of the bodies of the top-level ifs were extracted to their own helpers, and this method were just the branching.

stuartmorgan-g · 2025-11-10T16:37:34Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+      (final BytesMapBitmap bytesMapBitmap) => _bitmapBlobUrlCache.putIfAbsent(
+        bytesMapBitmap.byteData.hashCode,
+        () {
+          final web.Blob blob = web.Blob(


Should this have the same TODO as the essentially identical code above?

stuartmorgan-g · 2025-11-10T16:39:59Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

+
+/// Gets marker Id from a [marker] object.
+MarkerId getMarkerId(Object? marker) {
+  final JSObject object = marker! as JSObject;


Why is the parameter nullable if the first line is going to assert that it's not null?

stuartmorgan-g · 2025-11-10T16:42:00Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart

-  /// Creates a `MarkerController`, which wraps a [gmaps.Marker] object, its `onTap`/`onDrag` behavior, and its associated [gmaps.InfoWindow].
+/// The `MarkerController` class wraps a [gmaps.AdvancedMarkerElement]
+/// or [gmaps.Marker], how it handles events, and its associated (optional)
+/// [gmaps.InfoWindow] widget.


This should explain what T and O are in the context of the class.

stuartmorgan-g · 2025-11-10T16:43:21Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart

+
+  @override
+  void showInfoWindow() {
+    assert(_marker != null, 'Cannot `showInfoWindow` on a `remove`d Marker.');


Why is this a (debug only) assert rather than a StateError?

stuartmorgan-g · 2025-11-10T16:45:15Z

packages/google_maps_flutter/google_maps_flutter_web/lib/src/markers.dart

+/// advanced [gmaps.AdvancedMarkerElement] class.
+///
+/// [T] must extend [JSObject]. It's not specified in code because our mocking
+/// framework does not support mocking JSObjects.


Here too, the role of T and O should be explained.

stuartmorgan-g · 2025-11-10T16:47:38Z

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

+## 0.6.0
+
+* Adds Advanced markers support.
+


Please list the breaking changes (following repo style), and provide more details about the new APIs, giving someone reading this enough pointers that they could figure out what APIs to go look at to adopt the new markers.

stuartmorgan-g · 2025-11-10T16:48:48Z

packages/google_maps_flutter/google_maps_flutter_web/README.md

 ```

 Now you should be able to use the Google Maps plugin normally.



I think it would be helpful to add a new section discussing legacy vs advanced markers, with links to relevant underlying SDK docs.

aednlaxer requested a review from ditman as a code owner August 8, 2025 12:51

github-actions bot added p: google_maps_flutter platform-web labels Aug 8, 2025

gemini-code-assist bot reviewed Aug 8, 2025

View reviewed changes

stuartmorgan-g requested changes Aug 19, 2025

View reviewed changes

stuartmorgan-g mentioned this pull request Sep 24, 2025

[google_maps_flutter] Add Advanced Markers support #7882

Open

11 tasks

illuminati1911 force-pushed the feature/advanced_markers_google_maps_flutter_web branch from 9da73a7 to 65b8c81 Compare September 25, 2025 08:48

illuminati1911 requested a review from mdebbar as a code owner September 25, 2025 08:48

aednlaxer requested a review from stuartmorgan-g September 29, 2025 06:55

mdebbar reviewed Oct 1, 2025

View reviewed changes

jokerttu requested a review from mdebbar October 27, 2025 06:42

illuminati1911 force-pushed the feature/advanced_markers_google_maps_flutter_web branch from c1047c3 to f72d139 Compare October 27, 2025 07:09

mdebbar reviewed Oct 31, 2025

View reviewed changes

mdebbar approved these changes Nov 7, 2025

View reviewed changes

illuminati1911 force-pushed the feature/advanced_markers_google_maps_flutter_web branch from 4cbf9d7 to 71404f1 Compare November 10, 2025 02:27

aednlaxer and others added 11 commits November 10, 2025 11:28

Add Advanced markers support (web)

94f593b

Set minimum version of web package to 1.0.0

bf9ab89

Advanced markers package pr fixes

c2f5cb0

Unify web package double import

ee76359

Raise google maps flutter web package to version 0.6.0

6c8a158

Fix get marker id function in google maps flutter web package

cf9c3a5

Updated license headers in the google maps flutter web package

45b32d3

Minor refactoring to advanced markers for web

97b24fd

Handle listeners for web markers

4bae6f9

Code formatting

770f281

Web package html element refactoring

f30050c

illuminati1911 force-pushed the feature/advanced_markers_google_maps_flutter_web branch from 71404f1 to f30050c Compare November 10, 2025 03:29

stuartmorgan-g requested changes Nov 10, 2025

View reviewed changes

Web integration test fixes

cf1bf48

		clusterManagersController: clusterManagersController!
		as ClusterManagersController<gmaps.AdvancedMarkerElement>,

	element.innerHTML = textGlyph.text.toJS;
	element.text = textGlyph.text;

		final web.Element icon = web.document.createElement('img')
		..setAttribute('src', url);

	final web.Element icon = web.document.createElement('img')
	..setAttribute('src', url);
	final web.HTMLImageElement icon = web.HTMLImageElement()..src = url;

		final web.Element icon = web.document.createElement('img')
		..setAttribute('src', web.URL.createObjectURL(blob as JSObject));

		```

		Now you should be able to use the Google Maps plugin normally.

[google_maps_flutter_web] Add Advanced markers support (web) #9773

Are you sure you want to change the base?

[google_maps_flutter_web] Add Advanced markers support (web) #9773

Uh oh!

Conversation

aednlaxer commented Aug 8, 2025

Pre-Review Checklist

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stuartmorgan-g commented Sep 23, 2025

Uh oh!

stuartmorgan-g commented Sep 24, 2025

Uh oh!

aednlaxer commented Sep 24, 2025

Uh oh!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mdebbar left a comment