step 14 : custom marker google map

lib/test_map_x.dart

@@ -1,66 +1,63 @@
 import 'package:flutter/material.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:geolocator/geolocator.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 
-class TestMapX extends StatefulWidget {
+class TestMapX extends HookConsumerWidget {
   @override
-  _TestMapXState createState() => _TestMapXState();
-}
+  Widget build(BuildContext context, WidgetRef ref) {
+    final mapController = useState<GoogleMapController?>(null);
+    final currentPosition = useState<LatLng?>(null);
+    final isLocationSet = useState<bool>(false);
+    final customIcon = useState<BitmapDescriptor>(BitmapDescriptor.defaultMarker);
 
-class _TestMapXState extends State<TestMapX> {
-  late GoogleMapController mapController;
-  late LatLng _currentPosition;
-  bool _isLocationSet = false;
+    final center = const LatLng(-7.566957, 110.8080284);
 
-  final LatLng _center = const LatLng(
-    -7.566957,
-    110.8080284,
-  ); // Koordinat awal peta
-
-  void _onMapCreated(GoogleMapController controller) {
-    mapController = controller;
-  }
-
-  Future<void> _getCurrentLocation() async {
-    try {
-      // Check if location services are enabled
-      bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
-      if (!serviceEnabled) {
-        // Location services are not enabled
-        return;
+    useEffect(() {
+      Future<void> _loadCustomMarker() async {
+        final icon = await BitmapDescriptor.asset(
+          const ImageConfiguration(size: Size(100, 100)),
+          'images/custom_marker1.png',
+        );
+        customIcon.value = icon;
       }
 
-      // Check permission
-      LocationPermission permission = await Geolocator.checkPermission();
-      if (permission == LocationPermission.denied) {
-        permission = await Geolocator.requestPermission();
-        if (permission != LocationPermission.whileInUse &&
-            permission != LocationPermission.always) {
-          // Permissions are not granted
-          return;
+      _loadCustomMarker();
+      return null;
+    }, []);
+
+    Future<void> _getCurrentLocation() async {
+      try {
+        bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
+        if (!serviceEnabled) return;
+
+        LocationPermission permission = await Geolocator.checkPermission();
+        if (permission == LocationPermission.denied) {
+          permission = await Geolocator.requestPermission();
+          if (permission == LocationPermission.deniedForever ||
+              permission == LocationPermission.denied) {
+            return;
+          }
         }
+
+        Position position = await Geolocator.getCurrentPosition(
+          desiredAccuracy: LocationAccuracy.high,
+        );
+
+        currentPosition.value = LatLng(position.latitude, position.longitude);
+        isLocationSet.value = true;
+
+        if (mapController.value != null) {
+          mapController.value!.animateCamera(
+            CameraUpdate.newLatLng(currentPosition.value!),
+          );
+        }
+      } catch (e) {
+        print('Error: $e');
       }
-
-      // Get current location
-      Position position = await Geolocator.getCurrentPosition(
-          desiredAccuracy: LocationAccuracy.high);
-
-      setState(() {
-        _currentPosition = LatLng(position.latitude, position.longitude);
-        _isLocationSet = true;
-      });
-
-      // Move camera to current location
-      mapController.animateCamera(
-        CameraUpdate.newLatLng(_currentPosition),
-      );
-    } catch (e) {
-      print('Error: $e');
     }
-  }
 
-  @override
-  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Google Maps Flutter Web'),
@@ -69,20 +66,22 @@ class _TestMapXState extends State<TestMapX> {
       body: Stack(
         children: <Widget>[
           GoogleMap(
-            onMapCreated: _onMapCreated,
+            onMapCreated: (controller) => mapController.value = controller,
             initialCameraPosition: CameraPosition(
-              target: _center,
+              target: center,
               zoom: 11.0,
             ),
-            markers: _isLocationSet
+            markers: isLocationSet.value && currentPosition.value != null
                 ? {
                     Marker(
                       markerId: MarkerId('current_location'),
-                      position: _currentPosition,
+                      position: currentPosition.value!,
+                      icon: customIcon.value,
                       infoWindow: InfoWindow(
-                        title: 'Your Location ${_currentPosition.latitude.toString()} , ${_currentPosition.longitude.toString()}',
+                        title: 'Posisi : ${currentPosition.value!.latitude}, ${currentPosition.value!.longitude}',
+                        snippet:
+                            '${currentPosition.value!.latitude}, ${currentPosition.value!.longitude}',
                       ),
-                      icon: BitmapDescriptor.defaultMarker, // Default marker icon
                     ),
                   }
                 : {},

pubspec.yaml

@@ -76,7 +76,8 @@ dependencies:
   camera: ^0.11.0+2
   flutter_image_compress: ^1.1.0
   path: ^1.8.3
-  google_maps_flutter: ^2.2.6
+  # google_maps_flutter: ^2.2.6
+  google_maps_flutter: ^2.9.0
   google_maps_flutter_web: ^0.5.10
 
 dev_dependencies: