diff --git a/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md b/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md index c8657c54f8d8..8e20b2c34255 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md +++ b/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. diff --git a/packages/google_maps_flutter/google_maps_flutter_web/example/latest/integration_test/advanced_markers_test.dart b/packages/google_maps_flutter/google_maps_flutter_web/example/latest/integration_test/advanced_markers_test.dart index c3868cd5ac6d..330839e4ebe8 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/example/latest/integration_test/advanced_markers_test.dart +++ b/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(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(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( diff --git a/packages/google_maps_flutter/google_maps_flutter_web/lib/google_maps_flutter_web.dart b/packages/google_maps_flutter/google_maps_flutter_web/lib/google_maps_flutter_web.dart index 0413faaf104d..726a0908c839 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/lib/google_maps_flutter_web.dart +++ b/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'; diff --git a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart b/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart index 99d7986fe308..4084617e7fd5 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart +++ b/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 _markerOptionsFromMarker(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() diff --git a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart b/packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart index d905b01eab3e..ac7e3f92ccf1 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/marker.dart +++ b/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; diff --git a/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml b/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml index 9a19bffc4e88..4ddb06177d44 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml +++ b/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