[google_maps_flutter_web] Add Advanced markers support (web) by aednlaxer · Pull Request #9773 · flutter/packages

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!

…_web

stuartmorgan-g

LGTM

stuartmorgan-g · 2026-01-06T20:15:07Z

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

+  @override
+  Future<bool> isAdvancedMarkersAvailable({required int mapId}) async {
+    final GoogleMapController map = _map(mapId);
+    return map.isAdvancedMarkersAvailable();


Nit: why not just return _map(mapId).isAdvancedMarkersAvailable() like the other methods? The intermediate variable doesn't seem to be adding anything here.

…_web

jokerttu · 2026-01-14T14:51:09Z

@mdebbar @stuartmorgan-g
This package has now been updated against main and is ready to be landed when you consider it ready.

Since the google_maps_flutter_web package does not have a proper example app, I performed manual testing using the app-facing package (google_maps_flutter). You can find the updated app-facing PR here:
#7882

…_web

stuartmorgan-g · 2026-02-10T19:33:19Z

Sorry about that, I missed the previous comment. Landing now!

flutter/packages#9773)

flutter/packages@091acc5...1e50195 2026-02-10 20989940+aednlaxer@users.noreply.github.com [google_maps_flutter_web] Add Advanced markers support (web) (flutter/packages#9773) 2026-02-10 louisehsu@google.com [google_sign_in_ios][UIScene] Migrate to UIScene (flutter/packages#10960) 2026-02-10 stuartmorgan@google.com [google_maps_flutter] Fix custom marker icons on iOS (flutter/packages#10993) 2026-02-10 engine-flutter-autoroll@skia.org Roll Flutter from e8f9dc5 to 9bda20a (34 revisions) (flutter/packages#10992) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC flutter-ecosystem@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…r#182216) flutter/packages@091acc5...1e50195 2026-02-10 20989940+aednlaxer@users.noreply.github.com [google_maps_flutter_web] Add Advanced markers support (web) (flutter/packages#9773) 2026-02-10 louisehsu@google.com [google_sign_in_ios][UIScene] Migrate to UIScene (flutter/packages#10960) 2026-02-10 stuartmorgan@google.com [google_maps_flutter] Fix custom marker icons on iOS (flutter/packages#10993) 2026-02-10 engine-flutter-autoroll@skia.org Roll Flutter from e8f9dc5 to 9bda20a (34 revisions) (flutter/packages#10992) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC flutter-ecosystem@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

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

illuminati1911 and others added 14 commits November 11, 2025 16:15

Web integration test fixes

cf1bf48

General fixes and refactoring

ff2cf6c

web advanced marker documentation changes

f255a1f

formatting changes

98d8d50

Merge branch 'main' into feature/advanced_markers_google_maps_flutter…

33f1f95

…_web

readme fix

4d9d914

further readme fixes

5aa1549

Merge branch 'main' into feature/advanced_markers_google_maps_flutter…

4162635

…_web

integration test fix

e3496b8

flutter analyze fixes

521ae73

flutter analyze and format fixes for web package

740eba4

integration test fix

732d595

update integration test mocks

69f740d

fix: MarkersController mock

276d88b

jokerttu requested review from mdebbar and stuartmorgan-g November 27, 2025 08:04

stuartmorgan-g approved these changes Jan 6, 2026

View reviewed changes

mdebbar approved these changes Jan 6, 2026

View reviewed changes

Merge branch 'main' into feature/advanced_markers_google_maps_flutter…

340adb9

…_web

illuminati1911 force-pushed the feature/advanced_markers_google_maps_flutter_web branch from 383a245 to 340adb9 Compare January 13, 2026 07:01

Merge branch 'main' into feature/advanced_markers_google_maps_flutter…

93b5efe

…_web

Merge branch 'main' into feature/advanced_markers_google_maps_flutter…

fe236ba

…_web

stuartmorgan-g added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 10, 2026

auto-submit bot merged commit 1e50195 into flutter:main Feb 10, 2026
80 checks passed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Feb 11, 2026

1e5019501 [google_maps_flutter_web] Add Advanced markers support (web) (

b9df98d

flutter/packages#9773)

engine-flutter-autoroll mentioned this pull request Feb 11, 2026

Roll Packages from 091acc58aca3 to 1e5019501fe2 (4 revisions) flutter/flutter#182216

Merged

		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));

Comments

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

Choose a reason for hiding this comment

Uh oh!

stuartmorgan-g left a comment

jokerttu commented Jan 14, 2026 •

edited

Loading