Skip to content

[google_maps_flutter_web] Fix AdvancedMarker anchors on web#11966

Open
3ph wants to merge 4 commits into
flutter:mainfrom
3ph:fixes-marker-anchor-on-web
Open

[google_maps_flutter_web] Fix AdvancedMarker anchors on web#11966
3ph wants to merge 4 commits into
flutter:mainfrom
3ph:fixes-marker-anchor-on-web

Conversation

@3ph

@3ph 3ph commented Jun 23, 2026

Copy link
Copy Markdown

Fixes AdvancedMarker anchor handling in google_maps_flutter_web.

Previously AdvancedMarker.anchor was not applied on web, so custom advanced marker content was positioned as if it used the default anchor. This caused markers with non-default anchors to appear offset from their intended map coordinates.

This PR converts Flutter marker anchor offsets into the Google Maps JavaScript Advanced Marker anchorLeft and anchorTop CSS offset properties when creating marker options, and reapplies those properties when an existing advanced marker is updated.

Adds integration test coverage for creating and updating an AdvancedMarker with custom anchors.

Addresses flutter/flutter#80578.

Pre-Review Checklist

@google-cla

google-cla Bot commented Jun 23, 2026

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request implements AdvancedMarker anchor handling for the Google Maps Flutter Web plugin. It introduces helper functions to convert anchor offsets to CSS percentage strings and apply them as anchorLeft and anchorTop properties on the underlying AdvancedMarkerElement and its options. Additionally, an integration test has been added to verify that anchors are correctly set and updated. I have no feedback to provide.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request fixes the anchor handling for AdvancedMarker on the web platform by introducing helper functions to convert anchor offsets to CSS percentages and apply them to AdvancedMarkerElementOptions and AdvancedMarkerElement. It also adds an integration test to verify anchor positioning and updates, and bumps the package version to 0.6.2+4. There are no review comments, and I have no feedback to provide.

@stuartmorgan-g

Copy link
Copy Markdown
Collaborator

Thanks for the contribution! There are two email addresses associated with the commits in this PR, and only one has a CLA on file. You'll need to either sign the CLA for the second address, or if using it was unintentional, amend your commits and re-push. Once that's done, please mark as Read for Review.

@stuartmorgan-g stuartmorgan-g marked this pull request as draft June 30, 2026 18:28
@3ph 3ph marked this pull request as ready for review June 30, 2026 22:59

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request implements AdvancedMarker anchor handling on the web platform by converting anchor offsets to CSS percentage strings and applying them to the marker options, supported by new integration tests. Feedback suggests addressing potential floating-point precision issues in the percentage calculation to prevent verbose CSS output.

Comment on lines +370 to +376
String _advancedMarkerAnchorToCssOffset(double anchor) {
final double percentage = -anchor * 100;
if (percentage == percentage.roundToDouble()) {
return '${percentage.toInt()}%';
}
return '$percentage%';
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Floating-point multiplication (e.g., -anchor * 100) can sometimes introduce precision artifacts (for example, -0.14 * 100 results in -14.000000000000002 in Dart/JS). This can cause the strict equality check percentage == percentage.roundToDouble() to fail, leading to unnecessarily verbose CSS percentage strings like '-14.000000000000002%' instead of '-14%'.

Using a small epsilon check when comparing the percentage to its rounded integer value will make the output cleaner and more robust against floating-point precision issues.

Suggested change
String _advancedMarkerAnchorToCssOffset(double anchor) {
final double percentage = -anchor * 100;
if (percentage == percentage.roundToDouble()) {
return '${percentage.toInt()}%';
}
return '$percentage%';
}
String _advancedMarkerAnchorToCssOffset(double anchor) {
final double percentage = -anchor * 100;
final int rounded = percentage.round();
if ((percentage - rounded).abs() < 1e-9) {
return '$rounded%';
}
return '$percentage%';
}

import 'dart:async';
import 'dart:convert';
import 'dart:js_interop';
import 'dart:js_interop_unsafe';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this using unsafe dynamic lookup? If there are properties that aren't reflected in google_maps, they should be added upstream, rather than bypassing the wrapper.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants