[google_maps_flutter_web] Add "My Location" Widget

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 0.4.0+4
 
+* Add "My Location" Widget. Issue [#64073](https://github.com/flutter/flutter/issues/64073)
 * Updates code for `no_leading_underscores_for_local_identifiers` lint.
 
 ## 0.4.0+3

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

@@ -485,6 +485,74 @@ void main() {
           expect(controller.trafficLayer, isNotNull);
         });
       });
+
+      group('My Location', () {
+        testWidgets('by default is disabled', (WidgetTester tester) async {
+          controller = createController();
+          controller.init();
+          expect(controller.myLocationButton, isNull);
+        });
+
+        testWidgets('initializes with my location with my location button',
+            (WidgetTester tester) async {
+          const LatLng currentLocation = LatLng(10.8231, 106.6297);
+          controller = createController(
+              mapConfiguration: const MapConfiguration(
+            myLocationEnabled: true,
+            myLocationButtonEnabled: true,
+          ));
+          controller.debugSetOverrides(
+            createMap: (_, __) => map,
+            markers: markers,
+            getCurrentLocation: () => Future<LatLng>.value(currentLocation),
+          );
+          controller.init();
+
+          await Future<void>.delayed(const Duration(milliseconds: 50));
+
+          final Set<Marker> capturedMarkers =
+              verify(markers.addMarkers(captureAny)).captured[1] as Set<Marker>;
+
+          final gmaps.LatLng gmCenter = map.center!;
+
+          expect(controller.myLocationButton, isNotNull);
+          expect(capturedMarkers.length, 1);
+          expect(capturedMarkers.first.position, currentLocation);
+          expect(capturedMarkers.first.zIndex, 0.5);
+          expect(gmCenter.lat, currentLocation.latitude);
+          expect(gmCenter.lng, currentLocation.longitude);
+        });
+
+        testWidgets('initializes with my location without my location button',
+            (WidgetTester tester) async {
+          const LatLng currentLocation = LatLng(10.8231, 106.6297);
+          controller = createController(
+              mapConfiguration: const MapConfiguration(
+            myLocationEnabled: true,
+            myLocationButtonEnabled: false,
+          ));
+          controller.debugSetOverrides(
+            createMap: (_, __) => map,
+            markers: markers,
+            getCurrentLocation: () => Future<LatLng>.value(currentLocation),
+          );
+          controller.init();
+
+          await Future<void>.delayed(const Duration(milliseconds: 50));
+
+          final Set<Marker> capturedMarkers =
+              verify(markers.addMarkers(captureAny)).captured[1] as Set<Marker>;
+
+          final gmaps.LatLng gmCenter = map.center!;
+
+          expect(controller.myLocationButton, isNull);
+          expect(capturedMarkers.length, 1);
+          expect(capturedMarkers.first.position, currentLocation);
+          expect(capturedMarkers.first.zIndex, 0.5);
+          expect(gmCenter.lat, currentLocation.latitude);
+          expect(gmCenter.lng, currentLocation.longitude);
+        });
+      });
     });
 
     // These are the methods that are delegated to the gmaps.GMap object, that we can mock...

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/google_maps_plugin_test.mocks.dart

@@ -101,6 +101,7 @@ class MockGoogleMapController extends _i1.Mock
     _i4.CirclesController? circles,
     _i4.PolygonsController? polygons,
     _i4.PolylinesController? polylines,
+    _i4.DebugGetCurrentLocation? getCurrentLocation,
   }) =>
       super.noSuchMethod(
         Invocation.method(
@@ -112,6 +113,7 @@ class MockGoogleMapController extends _i1.Mock
             #circles: circles,
             #polygons: polygons,
             #polylines: polylines,
+            #getCurrentLocation: getCurrentLocation,
           },
         ),
         returnValueForMissingStub: null,

packages/google_maps_flutter/google_maps_flutter_web/example/web/index.html

@@ -6,8 +6,7 @@
     <head>
         <title>Browser Tests</title>
         <!-- This API key comes from: go/flutter-maps-web-tests-api-key (GCP project: flutter-infra) -->
-        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk&libraries=geometry"></script>
-    </head>
+        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk&libraries=geometry"></script>    </head>
     <body>
         <script src="main.dart.js"></script>
     </body>

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

@@ -41,7 +41,7 @@ double _getCssOpacity(Color color) {
 // myLocationEnabled needs to be built through dart:html navigator.geolocation
 //   See: https://api.dart.dev/stable/2.8.4/dart-html/Geolocation-class.html
 // trafficEnabled is handled when creating the GMap object, since it needs to be added as a layer.
-// trackCameraPosition is just a boolan value that indicates if the map has an onCameraMove handler.
+// trackCameraPosition is just a boolean value that indicates if the map has an onCameraMove handler.
 // indoorViewEnabled seems to not have an equivalent in web
 // buildingsEnabled seems to not have an equivalent in web
 // padding seems to behave differently in web than mobile. You can't move UI elements in web.

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

@@ -9,6 +9,10 @@ part of google_maps_flutter_web;
 typedef DebugCreateMapFunction = gmaps.GMap Function(
     HtmlElement div, gmaps.MapOptions options);
 
+/// Type used when passing an override to the _getCurrentLocation function.
+@visibleForTesting
+typedef DebugGetCurrentLocation = Future<LatLng> Function();
+
 /// Encapsulates a [gmaps.GMap], its events, and where in the DOM it's rendered.
 class GoogleMapController {
   /// Initializes the GMap, and the sub-controllers related to it. Wires events.
@@ -64,6 +68,7 @@ class GoogleMapController {
   // The Flutter widget that contains the rendered Map.
   HtmlElementView? _widget;
   late HtmlElement _div;
+  HtmlElement? _myLocationButton;
 
   /// The Flutter widget that will contain the rendered Map. Used for caching.
   Widget? get widget {
@@ -75,6 +80,10 @@ class GoogleMapController {
     return _widget;
   }
 
+  /// A getter for the my location button
+  @visibleForTesting
+  HtmlElement? get myLocationButton => _myLocationButton;
+
   // The currently-enabled traffic layer.
   gmaps.TrafficLayer? _trafficLayer;
 
@@ -114,14 +123,19 @@ class GoogleMapController {
     CirclesController? circles,
     PolygonsController? polygons,
     PolylinesController? polylines,
+    DebugGetCurrentLocation? getCurrentLocation,
   }) {
     _overrideCreateMap = createMap;
     _markersController = markers ?? _markersController;
     _circlesController = circles ?? _circlesController;
     _polygonsController = polygons ?? _polygonsController;
     _polylinesController = polylines ?? _polylinesController;
+    _overrideGetCurrentLocation = getCurrentLocation;
   }
 
+  // Get current location
+  DebugGetCurrentLocation? _overrideGetCurrentLocation;
+
   DebugCreateMapFunction? _overrideCreateMap;
 
   gmaps.GMap _createMap(HtmlElement div, gmaps.MapOptions options) {
@@ -163,6 +177,7 @@ class GoogleMapController {
 
     // Create the map...
     final gmaps.GMap map = _createMap(_div, options);
+
     _googleMap = map;
 
     _attachMapEvents(map);
@@ -177,6 +192,14 @@ class GoogleMapController {
     );
 
     _setTrafficLayer(map, _lastMapConfiguration.trafficEnabled ?? false);
+
+    if ((_lastMapConfiguration.myLocationEnabled ?? false) &&
+        (_lastMapConfiguration.myLocationButtonEnabled ?? false)) {
+      _addMyLocationButton(map);
+    }
+    if (_lastMapConfiguration.myLocationEnabled ?? false) {
+      _moveToCurrentLocation();
+    }
   }
 
   // Funnels map gmap events into the plugin's stream controller.
@@ -413,6 +436,113 @@ class GoogleMapController {
     return _markersController?.isInfoWindowShown(markerId) ?? false;
   }
 
+  // Add My Location widget to right bottom
+  HtmlElement _createMyLocationButton() {
+    final HtmlElement controlDiv = DivElement();
+    controlDiv.style.marginRight = '10px';
+
+    final HtmlElement firstChild = ButtonElement();
+    firstChild.className = 'gm-control-active';
+    firstChild.style.backgroundColor = '#fff';
+    firstChild.style.border = 'none';
+    firstChild.style.outline = 'none';
+    firstChild.style.width = '40px';
+    firstChild.style.height = '40px';
+    firstChild.style.borderRadius = '2px';
+    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
+    firstChild.style.cursor = 'pointer';
+    firstChild.style.padding = '8px';
+    controlDiv.append(firstChild);
+
+    final HtmlElement secondChild = DivElement();
+    secondChild.style.width = '24px';
+    secondChild.style.height = '24px';
+    secondChild.style.backgroundImage =
+        'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
+    secondChild.style.backgroundSize = '240px 24px';
+    secondChild.style.backgroundPosition = '0px 0px';
+    secondChild.style.backgroundRepeat = 'no-repeat';
+    secondChild.id = 'you_location_img';
+    firstChild.append(secondChild);
+
+    firstChild.addEventListener('click', (_) {
+      String imgX = '0';
+      // Add animation when find current location
+      final Timer timer =
+          Timer.periodic(const Duration(milliseconds: 500), (_) {
+        imgX = (imgX == '-24') ? '0' : '-24';
+        document.getElementById('you_location_img')?.style.backgroundPosition =
+            '${imgX}px 0px';
+      });
+      // Find and move to current location
+      _moveToCurrentLocation().then((_) {
+        timer.cancel();
+        document.getElementById('you_location_img')?.style.backgroundPosition =
+            '-192px 0px';
+      });
+    });
+
+    return controlDiv;
+  }
+
+  // Get current location
+  Future<LatLng> _getCurrentLocation() async {
+    final Geoposition location =
+        await window.navigator.geolocation.getCurrentPosition();
+    return LatLng(
+      location.coords!.latitude!.toDouble(),
+      location.coords!.longitude!.toDouble(),
+    );
+  }
+
+  // Find and move to current location
+  Future<void> _moveToCurrentLocation() async {
+    LatLng location;
+    if (_overrideGetCurrentLocation != null) {
+      location = await _overrideGetCurrentLocation!.call();
+    } else {
+      location = await _getCurrentLocation();
+    }
+
+    await moveCamera(
+      CameraUpdate.newLatLng(location),
+    );
+
+    _addBlueDotMarker(location);
+  }
+
+  // Add my location to map
+  void _addMyLocationButton(gmaps.GMap map) {
+    _myLocationButton = _createMyLocationButton();
+
+    map.addListener('dragend', () {
+      document.getElementById('you_location_img')?.style.backgroundPosition =
+          '0px 0px';
+    });
+
+    map.controls![gmaps.ControlPosition.RIGHT_BOTTOM as int]
+        ?.push(_myLocationButton);
+  }
+
+  // Add blue dot for current location
+  Future<void> _addBlueDotMarker(LatLng location) async {
+    assert(
+        _markersController != null, 'Cannot update markers after dispose().');
+    final BitmapDescriptor icon = await BitmapDescriptor.fromAssetImage(
+      const ImageConfiguration(size: Size(18, 18)),
+      'icons/blue-dot.png',
+      package: 'google_maps_flutter_web',
+    );
+    _markersController?.addMarkers(<Marker>{
+      Marker(
+        markerId: const MarkerId('my_location_blue_dot'),
+        icon: icon,
+        position: location,
+        zIndex: 0.5,
+      )
+    });
+  }
+
   // Cleanup
 
   /// Disposes of this controller and its resources.

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/plugins/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.4.0+3
+version: 0.4.0+4
 
 environment:
   sdk: ">=2.12.0 <3.0.0"
@@ -15,7 +15,8 @@ flutter:
       web:
         pluginClass: GoogleMapsPlugin
         fileName: google_maps_flutter_web.dart
-
+  assets:
+    - icons/
 dependencies:
   flutter:
     sdk: flutter