step 15 : buat custom google map widget

lib/app/constant.dart

@@ -17,6 +17,10 @@ class Constant {
   static String baseUrlGoogleMapApis =
       "https://maps.googleapis.com/maps/api/geocode/json?";
 
+  // position longitude dan latitude awal
+  static double positionLatitudeAwal = -7.566957;
+  static double positionLongitudeAwal  = 110.8080284;
+
   static double designHeightPhone = 844;
   static double designWidthPhone = 390;
 

lib/main.dart

@@ -65,9 +65,9 @@ class MyApp extends StatelessWidget {
       ),
 
       // home: TestMap(),
-      // initialRoute: loginRoute,
+      initialRoute: loginRoute,
       // home: TestMapFlutterWeb(),
-      home:TestMapX(),
+      // home:TestMapX(),
       // initialRoute: testFlutterMapRoute,
       onGenerateRoute: AppRoute.generateRoute,
     );

lib/widget/custom_google_map_widget.dart

@@ -0,0 +1,129 @@
+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';
+
+import '../app/constant.dart';
+
+class CustomGoogleMapWidget extends HookConsumerWidget {
+  const CustomGoogleMapWidget({
+    super.key,
+    required this.positionLastLatitudeParam,
+    required this.positionLastLongitudeParam,
+  });
+
+  final ValueNotifier<double> positionLastLatitudeParam;
+  final ValueNotifier<double> positionLastLongitudeParam;
+  @override
+  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);
+
+    final center = LatLng(
+      Constant.positionLatitudeAwal,
+      Constant.positionLongitudeAwal,
+    );
+
+    useEffect(() {
+      Future<void> loadCustomMarker() async {
+        final icon = await BitmapDescriptor.asset(
+          const ImageConfiguration(size: Size(100, 100)),
+          'images/custom_marker1.png',
+        );
+        customIcon.value = icon;
+      }
+
+      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');
+      }
+    }
+
+    return Scaffold(
+      backgroundColor: Constant.textWhite,
+      appBar: AppBar(
+        title: Text(
+          // 'Home Screen',
+          'User Location',
+          overflow: TextOverflow.ellipsis,
+          style: TextStyle(
+            color: Constant.textBlack,
+          ),
+        ),
+        backgroundColor: Constant.textWhite,
+        iconTheme: IconThemeData(
+          color: Constant.textBlack,
+        ),
+        // elevation: 1.0,
+        elevation: 0.5,
+      ),
+      body: Stack(
+        children: <Widget>[
+          GoogleMap(
+            onMapCreated: (controller) => mapController.value = controller,
+            initialCameraPosition: CameraPosition(
+              target: center,
+              zoom: 11.0,
+            ),
+            markers: isLocationSet.value && currentPosition.value != null
+                ? {
+                    Marker(
+                      markerId: MarkerId('current_location'),
+                      position: currentPosition.value!,
+                      icon: customIcon.value,
+                      infoWindow: InfoWindow(
+                        title:
+                            'Posisi : ${currentPosition.value!.latitude}, ${currentPosition.value!.longitude}',
+                        snippet:
+                            '${currentPosition.value!.latitude}, ${currentPosition.value!.longitude}',
+                      ),
+                    ),
+                  }
+                : {},
+          ),
+          Positioned(
+            bottom: 20,
+            left: 20,
+            child: ElevatedButton(
+              onPressed: getCurrentLocation,
+              child: Text('Current Location'),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}