[google_maps_flutter_web] Fix AdvancedMarker anchors on web

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.6.2+4
+
+* Fix AdvancedMarker anchor handling on web.
+
 ## 0.6.2+3
 
 * Updates README to include setup information.

packages/google_maps_flutter/google_maps_flutter_web/example/latest/integration_test/advanced_markers_test.dart

@@ -5,6 +5,7 @@
 import 'dart:async';
 import 'dart:convert';
 import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
@@ -377,6 +378,32 @@ void main() {
       expect(icon.style.height, '30px');
     });
 
+    testWidgets('markers with anchor work', (WidgetTester tester) async {
+      const markerId = MarkerId('1');
+      const anchorOffset = Offset(0.25, 0.75);
+      const updatedAnchorOffset = Offset(-0.6, 1.6);
+
+      final markers = <AdvancedMarker>{AdvancedMarker(markerId: markerId, anchor: anchorOffset)};
+
+      await controller.addMarkers(markers);
+
+      gmaps.AdvancedMarkerElement? marker = controller.markers[markerId]?.marker;
+      expect(marker, isNotNull);
+      expect((marker!.getProperty('anchorLeft'.toJS)! as JSString).toDart, '-25%');
+      expect((marker.getProperty('anchorTop'.toJS)! as JSString).toDart, '-75%');
+
+      final updatedMarkers = <AdvancedMarker>{
+        AdvancedMarker(markerId: markerId, anchor: updatedAnchorOffset),
+      };
+
+      await controller.changeMarkers(updatedMarkers);
+
+      marker = controller.markers[markerId]?.marker;
+      expect(marker, isNotNull);
+      expect((marker!.getProperty('anchorLeft'.toJS)! as JSString).toDart, '60%');
+      expect((marker.getProperty('anchorTop'.toJS)! as JSString).toDart, '-160%');
+    });
+
     testWidgets('markers created with text glyph work', (WidgetTester widgetTester) async {
       final markers = <AdvancedMarker>{
         AdvancedMarker(

packages/google_maps_flutter/google_maps_flutter_web/lib/google_maps_flutter_web.dart

@@ -7,6 +7,7 @@ library google_maps_flutter_web;
 import 'dart:async';
 import 'dart:convert';
 import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 import 'dart:ui_web' as ui_web;
 
 import 'package:collection/collection.dart';

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

@@ -367,6 +367,35 @@ void _setIconAnchor({required gmaps.Size size, required Offset anchor, required
   icon.anchor = gmapsAnchor;
 }
 
+String _advancedMarkerAnchorToCssOffset(double anchor) {
+  final double percentage = -anchor * 100;
+  if (percentage == percentage.roundToDouble()) {
+    return '${percentage.toInt()}%';
+  }
+  return '$percentage%';
+}
+
+void _setAdvancedMarkerOptionsAnchor(gmaps.AdvancedMarkerElementOptions options, Offset anchor) {
+  options
+    ..setProperty('anchorLeft'.toJS, _advancedMarkerAnchorToCssOffset(anchor.dx).toJS)
+    ..setProperty('anchorTop'.toJS, _advancedMarkerAnchorToCssOffset(anchor.dy).toJS);
+}
+
+void _copyAdvancedMarkerOptionsAnchor(
+  gmaps.AdvancedMarkerElement marker,
+  gmaps.AdvancedMarkerElementOptions options,
+) {
+  final JSAny? anchorLeft = options.getProperty('anchorLeft'.toJS);
+  if (anchorLeft != null) {
+    marker.setProperty('anchorLeft'.toJS, anchorLeft);
+  }
+
+  final JSAny? anchorTop = options.getProperty('anchorTop'.toJS);
+  if (anchorTop != null) {
+    marker.setProperty('anchorTop'.toJS, anchorTop);
+  }
+}
+
 // Sets the size of the Google Maps icon.
 void _setIconSize({required gmaps.Size size, required gmaps.Icon icon}) {
   final gmapsSize = gmaps.Size(size.width, size.height);
@@ -705,6 +734,7 @@ Future<O> _markerOptionsFromMarker<T, O>(Marker marker, T? currentMarker) async
       ..title = sanitizeHtml(marker.infoWindow.title ?? '')
       ..zIndex = marker.zIndex
       ..gmpDraggable = marker.draggable;
+    _setAdvancedMarkerOptionsAnchor(options, marker.anchor);
     return options as O;
   } else {
     final options = gmaps.MarkerOptions()

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

@@ -312,6 +312,7 @@ class AdvancedMarkerController
     marker.position = options.position;
     marker.title = options.title ?? '';
     marker.zIndex = options.zIndex;
+    _copyAdvancedMarkerOptionsAnchor(marker, options);
 
     if (_infoWindow != null && newInfoWindowContent != null) {
       _infoWindow.content = newInfoWindowContent;

packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: google_maps_flutter_web
 description: Web platform implementation of google_maps_flutter
 repository: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
-version: 0.6.2+3
+version: 0.6.2+4
 
 environment:
   sdk: ^3.10.0