Update advanced marker examples

flutter · Jan 21, 2025 · c35eed5 · c35eed5
1 parent ea82733
commit c35eed5
Show file tree

Hide file tree

Showing 18 changed files with 2,534 additions and 587 deletions.
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/lib/advanced_marker_icons.dart b/packages/google_maps_flutter/google_maps_flutter/example/lib/advanced_marker_icons.dart
@@ -3,10 +3,11 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 
-import 'marker_icons.dart';
 import 'page.dart';
+import 'place_advanced_marker.dart';
 
 /// Page that demonstrates how to use custom [AdvanceMarker] icons.
 class AdvancedMarkerIconsPage extends GoogleMapExampleAppPage {
@@ -25,26 +26,137 @@ class AdvancedMarkerIconsPage extends GoogleMapExampleAppPage {
 
   @override
   Widget build(BuildContext context) {
-    return _AdvancedMarkerIconsBody(mapId);
+    return _AdvancedMarkerIconsBody(mapId: mapId);
   }
 }
 
-class _AdvancedMarkerIconsBody extends MarkerIconsBody {
-  const _AdvancedMarkerIconsBody(this.mapId);
+const LatLng _kMapCenter = LatLng(52.4478, -3.5402);
 
-  @override
+class _AdvancedMarkerIconsBody extends StatefulWidget {
+  const _AdvancedMarkerIconsBody({required this.mapId});
+
+  /// Map ID to use for the GoogleMap.
   final String? mapId;
 
   @override
-  Marker createMarker(
-    MarkerId markerId,
-    LatLng position,
-    BitmapDescriptor icon,
-  ) {
-    return AdvancedMarker(
-      markerId: markerId,
-      position: position,
-      icon: icon,
+  State<_AdvancedMarkerIconsBody> createState() =>
+      _AdvancedMarkerIconsBodyState();
+}
+
+class _AdvancedMarkerIconsBodyState extends State<_AdvancedMarkerIconsBody> {
+  final Set<AdvancedMarker> _markers = <AdvancedMarker>{};
+
+  GoogleMapController? controller;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        AdvancedMarkersCapabilityStatus(controller: controller),
+        Expanded(
+          child: GoogleMap(
+            mapId: widget.mapId,
+            markerType: GoogleMapMarkerType.advancedMarker,
+            initialCameraPosition: const CameraPosition(
+              target: _kMapCenter,
+              zoom: 7.0,
+            ),
+            markers: _markers,
+            onMapCreated: (GoogleMapController controller) {
+              setState(() {
+                this.controller = controller;
+              });
+            },
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.all(16),
+          child: TextButton(
+            onPressed: _markers.isNotEmpty
+                ? null
+                : () async {
+                    final AssetMapBitmap asset = await BitmapDescriptor.asset(
+                      const ImageConfiguration(
+                        size: Size(12, 12),
+                      ),
+                      'assets/red_square.png',
+                    );
+                    final AssetMapBitmap largeAsset =
+                        await BitmapDescriptor.asset(
+                      const ImageConfiguration(
+                        size: Size(36, 36),
+                      ),
+                      'assets/red_square.png',
+                    );
+
+                    setState(() {
+                      _markers.addAll(<AdvancedMarker>[
+                        // Default icon
+                        AdvancedMarker(
+                          markerId: const MarkerId('1'),
+                          position: LatLng(
+                            _kMapCenter.latitude + 1,
+                            _kMapCenter.longitude + 1,
+                          ),
+                        ),
+                        // Custom pin colors
+                        AdvancedMarker(
+                          markerId: const MarkerId('2'),
+                          position: LatLng(
+                            _kMapCenter.latitude - 1,
+                            _kMapCenter.longitude - 1,
+                          ),
+                          icon: BitmapDescriptor.pinConfig(
+                            borderColor: Colors.red,
+                            backgroundColor: Colors.black,
+                            glyph: const CircleGlyph(color: Colors.red),
+                          ),
+                        ),
+                        // Pin with text
+                        AdvancedMarker(
+                          markerId: const MarkerId('3'),
+                          position: LatLng(
+                            _kMapCenter.latitude - 1,
+                            _kMapCenter.longitude + 1,
+                          ),
+                          icon: BitmapDescriptor.pinConfig(
+                            borderColor: Colors.blue,
+                            backgroundColor: Colors.white,
+                            glyph: const TextGlyph(
+                              text: 'Hi!',
+                              textColor: Colors.blue,
+                            ),
+                          ),
+                        ),
+                        // Pin with bitmap
+                        AdvancedMarker(
+                          markerId: const MarkerId('4'),
+                          position: LatLng(
+                            _kMapCenter.latitude + 1,
+                            _kMapCenter.longitude - 1,
+                          ),
+                          icon: BitmapDescriptor.pinConfig(
+                            borderColor: Colors.red,
+                            backgroundColor: Colors.white,
+                            glyph: BitmapGlyph(bitmap: asset),
+                          ),
+                        ),
+                        // Custom marker icon
+                        AdvancedMarker(
+                          markerId: const MarkerId('5'),
+                          position: LatLng(
+                            _kMapCenter.latitude,
+                            _kMapCenter.longitude,
+                          ),
+                          icon: largeAsset,
+                        ),
+                      ]);
+                    });
+                  },
+            child: const Text('Add advanced markers'),
+          ),
+        ),
+      ],
     );
   }
 }