[google_maps_flutter_web] set icon anchor for markers (#8077)

*Fixes issue where a marker anchor is ignored on flutter web google maps.*

*flutter/flutter#80578

Author: veronikalaskova

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,5 +1,6 @@
-## 0.5.10+1
+## 0.5.11
 
+* Adds support for marker anchor.
 * Updates READMEs and API docs.
 * Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.
 

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/markers_test.dart

@@ -493,5 +493,48 @@ void main() {
       expect(event, isA<InfoWindowTapEvent>());
       expect((event as InfoWindowTapEvent).value, equals(const MarkerId('1')));
     });
+
+    testWidgets('markers with anchor work', (WidgetTester tester) async {
+      const double width = 20;
+      const double height = 30;
+      const Offset defaultOffset = Offset(0.5, 1);
+      const Offset anchorOffset = Offset(0, 0.5);
+      final Uint8List bytes = const Base64Decoder().convert(iconImageBase64);
+      final Marker marker1 = Marker(
+        markerId: const MarkerId('1'),
+        icon: BytesMapBitmap(
+          bytes,
+          width: width,
+          height: height,
+        ),
+      );
+      final Marker marker2 = Marker(
+        markerId: const MarkerId('2'),
+        icon: BytesMapBitmap(
+          bytes,
+          width: width,
+          height: height,
+        ),
+        anchor: anchorOffset,
+      );
+      final Set<Marker> markers = <Marker>{marker1, marker2};
+
+      await controller.addMarkers(markers);
+      expect(controller.markers.length, 2);
+
+      final gmaps.Icon? icon1 =
+          controller.markers[const MarkerId('1')]?.marker?.icon as gmaps.Icon?;
+      expect(icon1, isNotNull);
+      final gmaps.Icon? icon2 =
+          controller.markers[const MarkerId('2')]?.marker?.icon as gmaps.Icon?;
+      expect(icon2, isNotNull);
+
+      expect(icon1!.anchor, isNotNull);
+      expect(icon2!.anchor, isNotNull);
+      expect(icon1.anchor!.x, width * defaultOffset.dx);
+      expect(icon1.anchor!.y, height * defaultOffset.dy);
+      expect(icon2.anchor!.x, width * anchorOffset.dx);
+      expect(icon2.anchor!.y, height * anchorOffset.dy);
+    });
   });
 }

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

@@ -296,6 +296,18 @@ void _setIconSize({
   icon.scaledSize = gmapsSize;
 }
 
+void _setIconAnchor({
+  required Size size,
+  required Offset anchor,
+  required gmaps.Icon icon,
+}) {
+  final gmaps.Point gmapsAnchor = gmaps.Point(
+    size.width * anchor.dx,
+    size.height * anchor.dy,
+  );
+  icon.anchor = gmapsAnchor;
+}
+
 /// Determines the appropriate size for a bitmap based on its descriptor.
 ///
 /// This method returns the icon's size based on the provided [width] and
@@ -371,7 +383,7 @@ void _cleanUpBitmapConversionCaches() {
 
 // Converts a [BitmapDescriptor] into a [gmaps.Icon] that can be used in Markers.
 Future<gmaps.Icon?> _gmIconFromBitmapDescriptor(
-    BitmapDescriptor bitmapDescriptor) async {
+    BitmapDescriptor bitmapDescriptor, Offset anchor) async {
   gmaps.Icon? icon;
 
   if (bitmapDescriptor is MapBitmap) {
@@ -394,6 +406,7 @@ Future<gmaps.Icon?> _gmIconFromBitmapDescriptor(
         final Size? size = await _getBitmapSize(bitmapDescriptor, url);
         if (size != null) {
           _setIconSize(size: size, icon: icon);
+          _setIconAnchor(size: size, anchor: anchor, icon: icon);
         }
       case MapBitmapScaling.none:
         break;
@@ -460,7 +473,7 @@ Future<gmaps.MarkerOptions> _markerOptionsFromMarker(
     ..visible = marker.visible
     ..opacity = marker.alpha
     ..draggable = marker.draggable
-    ..icon = await _gmIconFromBitmapDescriptor(marker.icon);
+    ..icon = await _gmIconFromBitmapDescriptor(marker.icon, marker.anchor);
   // TODO(ditman): Compute anchor properly, otherwise infowindows attach to the wrong spot.
   // Flat and Rotation are not supported directly on the web.
 }

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.5.10+1
+version: 0.5.11
 
 environment:
   sdk: ^3.4.0