step 13 : show google map flutter web & current location function

2024-08-28 12:02:47 +07:00
parent 40453ab16b
commit 6bab2dbef3
5 changed files with 149 additions and 33 deletions
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -5,6 +5,8 @@ import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../app/route.dart';
 import 'package:intl/date_symbol_data_local.dart';
+
+import 'test_map_x.dart';
 // import '../test_map.dart';

 // final routerProvider = Provider((_) => GlobalKey<NavigatorState>());
@@ -63,8 +65,9 @@ class MyApp extends StatelessWidget {
      ),

      // home: TestMap(),
-      initialRoute: loginRoute,
-      // home: TestFlutterWebMap(),
+      // initialRoute: loginRoute,
+      // home: TestMapFlutterWeb(),
+      home:TestMapX(),
      // initialRoute: testFlutterMapRoute,
      onGenerateRoute: AppRoute.generateRoute,
    );
--- a/lib/test_map_x.dart
+++ b/lib/test_map_x.dart
@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+import 'package:geolocator/geolocator.dart';
+
+class TestMapX extends StatefulWidget {
+  @override
+  _TestMapXState createState() => _TestMapXState();
+}
+
+class _TestMapXState extends State<TestMapX> {
+  late GoogleMapController mapController;
+  late LatLng _currentPosition;
+  bool _isLocationSet = false;
+
+  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;
+      }
+
+      // 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;
+        }
+      }
+
+      // 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'),
+        backgroundColor: Colors.green[700],
+      ),
+      body: Stack(
+        children: <Widget>[
+          GoogleMap(
+            onMapCreated: _onMapCreated,
+            initialCameraPosition: CameraPosition(
+              target: _center,
+              zoom: 11.0,
+            ),
+            markers: _isLocationSet
+                ? {
+                    Marker(
+                      markerId: MarkerId('current_location'),
+                      position: _currentPosition,
+                      infoWindow: InfoWindow(
+                        title: 'Your Location ${_currentPosition.latitude.toString()} , ${_currentPosition.longitude.toString()}',
+                      ),
+                      icon: BitmapDescriptor.defaultMarker, // Default marker icon
+                    ),
+                  }
+                : {},
+          ),
+          Positioned(
+            bottom: 20,
+            left: 20,
+            child: ElevatedButton(
+              onPressed: _getCurrentLocation,
+              child: Text('Current Location'),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -141,10 +141,10 @@ packages:
    dependency: transitive
    description:
      name: cross_file
-      sha256: "2f9d2cbccb76127ba28528cb3ae2c2326a122446a83de5a056aaa3880d3882c5"
+      sha256: "7caf6a750a0c04effbb52a676dce9a4a592e10ad35c34d6d2d0e4811160d5670"
      url: "https://pub.dev"
    source: hosted
-    version: "0.3.3+7"
+    version: "0.3.4+2"
  crypto:
    dependency: transitive
    description:
@@ -189,10 +189,18 @@ packages:
    dependency: "direct main"
    description:
      name: dio
-      sha256: "7d328c4d898a61efc3cd93655a0955858e29a0aa647f0f9e02d59b3bb275e2e8"
+      sha256: "0dfb6b6a1979dac1c1245e17cef824d7b452ea29bd33d3467269f9bef3715fb0"
      url: "https://pub.dev"
    source: hosted
-    version: "4.0.6"
+    version: "5.6.0"
+  dio_web_adapter:
+    dependency: transitive
+    description:
+      name: dio_web_adapter
+      sha256: "33259a9276d6cea88774a0000cfae0d861003497755969c92faa223108620dc8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
  equatable:
    dependency: "direct main"
    description:
@@ -372,10 +380,10 @@ packages:
    dependency: "direct main"
    description:
      name: geolocator
-      sha256: "0ec58b731776bc43097fcf751f79681b6a8f6d3bc737c94779fe9f1ad73c1a81"
+      sha256: "149876cc5207a0f5daf4fdd3bfcf0a0f27258b3fe95108fa084f527ad0568f1b"
      url: "https://pub.dev"
    source: hosted
-    version: "13.0.1"
+    version: "12.0.0"
  geolocator_android:
    dependency: transitive
    description:
@@ -404,10 +412,10 @@ packages:
    dependency: transitive
    description:
      name: geolocator_web
-      sha256: "2ed69328e05cd94e7eb48bb0535f5fc0c0c44d1c4fa1e9737267484d05c29b5e"
+      sha256: "7a22f400d831f924a89d931ba126a10e6b8b437f31e6b9311320435f3e1571bd"
      url: "https://pub.dev"
    source: hosted
-    version: "4.1.1"
+    version: "4.0.0"
  geolocator_windows:
    dependency: transitive
    description:
@@ -420,10 +428,10 @@ packages:
    dependency: transitive
    description:
      name: google_identity_services_web
-      sha256: "000b7a31e1fa17ee04b6c0553a2b2ea18f9f9352e4dcc0c9fcc785cf10f2484e"
+      sha256: "5be191523702ba8d7a01ca97c17fca096822ccf246b0a9f11923a6ded06199b6"
      url: "https://pub.dev"
    source: hosted
-    version: "0.2.2"
+    version: "0.3.1+4"
  google_maps:
    dependency: transitive
    description:
@@ -508,10 +516,10 @@ packages:
    dependency: transitive
    description:
      name: google_sign_in_web
-      sha256: b48263e47f9493ba4120ccdfffe7412549ee297e82b97be9b8fa16ea8919ffbe
+      sha256: "042805a21127a85b0dc46bba98a37926f17d2439720e8a459d27045d8ef68055"
      url: "https://pub.dev"
    source: hosted
-    version: "0.12.0+4"
+    version: "0.12.4+2"
  gql:
    dependency: transitive
    description:
@@ -716,10 +724,10 @@ packages:
    dependency: transitive
    description:
      name: js
-      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
+      sha256: c1b2e9b5ea78c45e1a0788d29606ba27dc5f71f019f32ca5140f61ef071838cf
      url: "https://pub.dev"
    source: hosted
-    version: "0.6.7"
+    version: "0.7.1"
  json_annotation:
    dependency: transitive
    description:
@@ -780,26 +788,26 @@ packages:
    dependency: "direct main"
    description:
      name: location
-      sha256: "06be54f682c9073cbfec3899eb9bc8ed90faa0e17735c9d9fa7fe426f5be1dd1"
+      sha256: "37ffdadcd4b1498b769824f45ebb4de8ed46663a4a67ac27b33a590ee486579f"
      url: "https://pub.dev"
    source: hosted
-    version: "5.0.3"
+    version: "6.0.2"
  location_platform_interface:
    dependency: transitive
    description:
      name: location_platform_interface
-      sha256: "8aa1d34eeecc979d7c9fe372931d84f6d2ebbd52226a54fe1620de6fdc0753b1"
+      sha256: "2ecde6bb0f88032b0bbbde37e18975b4468711dd92619c2235cc0c0ee93b4b8e"
      url: "https://pub.dev"
    source: hosted
-    version: "3.1.2"
+    version: "4.0.0"
  location_web:
    dependency: transitive
    description:
      name: location_web
-      sha256: ec484c66e8a4ff1ee5d044c203f4b6b71e3a0556a97b739a5bc9616de672412b
+      sha256: "924da8436db7ded5eef92a7ef3ae6aa3715831a93965376c91738f586302350e"
      url: "https://pub.dev"
    source: hosted
-    version: "4.2.0"
+    version: "5.0.0"
  logger:
    dependency: transitive
    description:
@@ -1028,10 +1036,10 @@ packages:
    dependency: transitive
    description:
      name: pointycastle
-      sha256: "7c1e5f0d23c9016c5bbd8b1473d0d3fb3fc851b876046039509e18e0c7485f2c"
+      sha256: "4be0097fcf3fd3e8449e53730c631200ebc7b88016acecab2b0da2f0149222fe"
      url: "https://pub.dev"
    source: hosted
-    version: "3.7.3"
+    version: "3.9.1"
  polylabel:
    dependency: transitive
    description:
@@ -1297,10 +1305,10 @@ packages:
    dependency: transitive
    description:
      name: web
-      sha256: d43c1d6b787bf0afad444700ae7f4db8827f701bc61c255ac8d328c6f4d52062
+      sha256: "97da13628db363c635202ad97068d47c5b8aa555808e7a9411963c533b449b27"
      url: "https://pub.dev"
    source: hosted
-    version: "1.0.0"
+    version: "0.5.1"
  web_socket_channel:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -37,9 +37,10 @@ dependencies:
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  # geolocator: ^10.1.0
-  geolocator: ^13.0.1
+  geolocator: ^12.0.0
  # geocoding: ^2.1.1
-  dio: ^4.0.6
+  # dio: ^4.0.6
+  dio: ^5.3.3
  flutter_riverpod: ^1.0.4
  flutter_hooks: ^0.18.5+1
  hooks_riverpod: ^1.0.4
@@ -70,7 +71,7 @@ dependencies:
  eva_icons_flutter: ^3.1.0
  image_picker_web: ^4.0.0
  dart_nominatim: ^1.0.1
-  location: ^5.0.0
+  location: ^6.0.2
  # camera_web: ^0.3.5
  camera: ^0.11.0+2
  flutter_image_compress: ^1.1.0
--- a/web/index.html
+++ b/web/index.html
@@ -97,16 +97,18 @@
  <script>
    // var API_KEY = "AIzaSyCiN7EeJsUpXVLQKFfrj3sE5OTKebjpzek";
    // var API_KEY = "AIzaSyCztj0X7erH-uqotFfe_Yd-Nt0oBJu6FeM";
-    // var script = document.createElement('script');
-    // script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY;
-    // document.head.appendChild(script);
+    var API_KEY = "AIzaSyAVUr4Ku4O1HlSkK8n9KGnUyqvsXBL-yfs";
+    var script = document.createElement('script');
+    script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY;
+    document.head.appendChild(script);

    // tambahan
    window.onload = function () {
-      getLocationAndSend();
+      // getLocationAndSend();
    };
    // tambahan
  </script>
+  <script src ="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVUr4Ku4O1HlSkK8n9KGnUyqvsXBL-yfs&callback=initMap&v=weekly&libraries=marker" defer></script>
 </body>

 </html>