การแสดงแผนที่ Google Map ใน Flutter ตอนที่ 2

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:geolocator/geolocator.dart';

class Maps extends StatefulWidget {
  static const routeName = '/map';

  const Maps({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _MapsState();
  }
}

class _MapsState extends State<Maps> {
  // กำนหนดตัวควบคุมให้กับแผนที่ สังเกตว่า มีการใช้แบบ Completer ซึงในภาษา Dart 
  // เป็นคลาสที่ใช้ในการควบคุมการทำงานของ Future ดังนั้น ตัว controller จะถูกสร้างก็เมื่อตัวแผนที่
  // โหลดเรียบร้อยแล้วเท่านั้น เพื่อให้พร้อมใช้งาน
  final Completer<GoogleMapController> _controller =
      Completer<GoogleMapController>();

  // การกำหนดตำแหน่งต่างๆ จะใช้เป็นข้อมูล CameraPosition
  // ในตัวอย่างเรากำหนดตัวแปรไว้ 2 ตัว
  CameraPosition? _initialPosition; // ตัวแปรสำหรับตำแหน่งเริ่มต้น ยังไม่กำหนดค่าใดๆ
  // ตัวอย่งการกำหนดตำแหน่งแบบตายตัว สมมติเป็นห้าง มาบุญครอง
  static const CameraPosition _place_mbk = CameraPosition(
      bearing:0.0, // องศาทิศทางของกล้องตามเข็มนาฬิกาจากทิศเหนือ (หมุนแกนนอน)
      target: LatLng(13.745324385325134, 100.52999353076734), // พิกัด Lat  Long
      tilt: 0.0, // องศามุมที่กล้องหันตรงไปที่พื้นโลก (หมุนแกนตั้ง)
      zoom: 14.0 // ระดะับการขยาย 
    ); 

  @override
  void initState() {
    super.initState();
    // ขอสิทธิการเข้าถึงพิกัดตำแหน่ง
    requestPermissions();
    _getCurrentLocation();
  }

  // ขอ permission สำหรับจัดการตำแหน่ง
  void requestPermissions() async {
    await Permission.location.request();
  }

  // ฟังก์ชันเพื่อดึงตำแหน่งปัจจุบันของผู้ใช้
  Future<void> _getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    // ตรวจสอบว่าเปิด Location Services ไว้หรือไม่
    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      // หาก Location Services ปิด แสดงข้อความหรือจัดการตามต้องการ
      return;
    }

    // ตรวจสอบ permission สำหรับตำแหน่งที่ตั้ง
    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        // Permission ถูกปฏิเสธ
        return;
      }
    }

    if (permission == LocationPermission.deniedForever) {
      // Permission ถูกปฏิเสธอย่างถาวร
      return;
    }

    // หาก permission ได้รับการอนุญาต ดึงตำแหน่งที่ตั้งปัจจุบัน
    Position position = await Geolocator.getCurrentPosition();

    // กำหนดตำแหน่งเริ่มต้นเป็นตำแหน่งของผู้ใช้
    setState(() {
      // กำหนดค่าให้กับตำแหน่งเริ่มต้น แล้วสร้างรูปแบบพิกัดไว้ใช้งาน 
      // ค่า bearing และ tilt หากไม่กำหนด ก็จะใช้เป็น 0 ตามค่าเริ่มต้น ในที่นี้เราใช้แค่
      // ตำแหน่ง กับ การ zoom
      _initialPosition = CameraPosition(
        target: LatLng(position.latitude, position.longitude),
        zoom: 14.0,
      );
    });
  }

  // ฟังก์ชั่นเฉพาะ กรณีเราต้องการให้ไปยังตำแหน่ง ที่เจาะจง ในที่นี้คือไปตำแหน่ง ห้าง มาบุญครอง
  Future<void> _goToMBK() async {
    final GoogleMapController controller = await _controller.future;
    await controller.animateCamera(CameraUpdate.newCameraPosition(_place_mbk));
  }

  // ฟังก์ชั่นสำหรับ กรณีไปยังตำแหน่งใดๆ ที่ต้องการ ตามค่าที่ส่งเข้าไป 
  Future<void> _goToPosition(CameraPosition postion) async {
    final GoogleMapController controller = await _controller.future;
    await controller.animateCamera(CameraUpdate.newCameraPosition(postion));
  }  

  @override
  void dispose() {
    super.dispose();
  }  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('แผนที่'),
      ),
      body: _initialPosition == null  // กรณียังไม่ได้ตำแหน่ง แสดงตัว Loading ก่อน
          ? const Center(child: CircularProgressIndicator()) // Loading หรือจะใช้รูปแบบอื่นๆ แทนได้ถ้าต้องการ
          : Stack( // ใช้ stack ในการวางซ้อนแผนที่ รองรับการเพิ่มเมนูไอคอนต่างๆ
              children: [
                GoogleMap(
                  mapType: MapType.normal, // normal | terrain | satellite | hybrid
                  initialCameraPosition: _initialPosition!, // ใช้ค่าเริ่มต้นจากตำแหน่งของเรา
                  onMapCreated: (GoogleMapController controller) {
                    // ทำให้ Future สำเร็จเมื่อแผนที่ถูกสร้างเสร็จแล้ว
                    // ตัว controller พร้อมใช้งาน
                    _controller.complete(controller);
                  },
                  // ในที่นี้เราจtซ่อนตัวปุ่ม zoom และกำหนดเอง จากปุ่มที่เราสร้าง
                  zoomControlsEnabled: false, // ซ่อนค่าเริ่มต้นปุ่ม zoom
                  // ในที่นี้เราจะซ่อนตัวปุม ตำแหน่งปัจจุบัน และกำหนดเองจากปุ่มที่เราสร้าง
                  myLocationButtonEnabled:
                      false, // ซ่อนปุ่มตำแหน่งปัจจุบัน
                  myLocationEnabled: true, // แสดงรูป จุด ของตำแหน่งปัจจุบัน
                ),
                // ส่วนควบคุมการ Zoom ที่เราสร้างเอง
                Positioned(
                  top: 16,
                  right: 16,
                  child: Column(
                    children: [
                      FloatingActionButton(
                        mini: true,
                        onPressed: () async {
                          // ควบคุมการ Zoom In
                          final controller = await _controller.future;
                          controller.animateCamera(CameraUpdate.zoomIn());
                        },
                        heroTag: 'zoomin', // Set a unique tag ต้องกำหนด
                        child: const Icon(Icons.add),
                      ),
                      const SizedBox(height: 8),
                      FloatingActionButton(
                        mini: true,
                        onPressed: () async {
                          // ควบคุมการ Zoom Out
                          final controller = await _controller.future;
                          controller.animateCamera(CameraUpdate.zoomOut());
                        },
                        heroTag: 'zoomout', // Set a unique tag ต้องกำหนด
                        child: const Icon(Icons.remove),
                      ),
                    ],
                  ),
                ),
                // ส่วนควบคุมตำแหน่งปัจจุบัน ที่เราสร้างเอง
                Positioned(
                  bottom: 16,
                  right: 16,
                  child: FloatingActionButton(
                    onPressed: () {
                      // ไปยังตำแหน่ง จากพิกัด
                      _goToPosition(_initialPosition!);
                    },
                    heroTag: 'mylocation', // Set a unique tag ต้องกำหนด
                    child: const Icon(Icons.my_location),
                  ),
                ),
              ],
            ),
    );
  }
}

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // สำหรับใช้ rootBundle
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:geolocator/geolocator.dart';

class Maps extends StatefulWidget {
  static const routeName = '/map';

  const Maps({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _MapsState();
  }
}

class _MapsState extends State<Maps> {
  // กำนหนดตัวควบคุมให้กับแผนที่ สังเกตว่า มีการใช้แบบ Completer ซึงในภาษา Dart 
  // เป็นคลาสที่ใช้ในการควบคุมการทำงานของ Future ดังนั้น ตัว controller จะถูกสร้างก็เมื่อตัวแผนที่
  // โหลดเรียบร้อยแล้วเท่านั้น เพื่อให้พร้อมใช้งาน
  final Completer<GoogleMapController> _controller =
      Completer<GoogleMapController>();

  // การกำหนดตำแหน่งต่างๆ จะใช้เป็นข้อมูล CameraPosition
  // ในตัวอย่างเรากำหนดตัวแปรไว้ 2 ตัว
  CameraPosition? _initialPosition; // ตัวแปรสำหรับตำแหน่งเริ่มต้น ยังไม่กำหนดค่าใดๆ
  // ตัวอย่งการกำหนดตำแหน่งแบบตายตัว สมมติเป็นห้าง มาบุญครอง
  static const CameraPosition _place_mbk = CameraPosition(
      bearing:0.0, // องศาทิศทางของกล้องตามเข็มนาฬิกาจากทิศเหนือ (หมุนแกนนอน)
      target: LatLng(13.745324385325134, 100.52999353076734), // พิกัด Lat  Long
      tilt: 0.0, // องศามุมที่กล้องหันตรงไปที่พื้นโลก (หมุนแกนตั้ง)
      zoom: 14.0 // ระดะับการขยาย 
    ); 

  // สร้าง Set ของ Marker
  final Set<Marker> _markers = {};
  BitmapDescriptor? _markerIcon; // กำหนดไอคอนจากรูป
  final MarkerId _markerId = const MarkerId('current_location');
  LatLng? _activeMarkerPosition; // ตัวแปรสำหรับเก็บตำแหน่งของ Marker ที่ถูกลาก

  @override
  void initState() {
    super.initState();
    // ขอสิทธิการเข้าถึงพิกัดตำแหน่ง
    requestPermissions();
    _getCurrentLocation();
    // เตรียมไอคอน
    prepareIcons();
  }

  // ขอ permission สำหรับจัดการตำแหน่ง
  void requestPermissions() async {
    await Permission.location.request();
  }

  // สร้างไอคอนจากรูปใน assets
  void prepareIcons() async {
      _markerIcon = await BitmapDescriptor.asset(
      const ImageConfiguration(size: Size(41.5, 48)), // ขนาดของไอคอนที่ต้องการแสดง
      // const ImageConfiguration(), // ขนาดของไอคอนที่ต้องการแสดงใช้ตามขนาดรูป
      'assets/icon/marker.png', // พาธของ asset ขนาดรูปตัวอย่างที่ทดสอบคือ 32x37
    );  
  }

  // ฟังก์ชันเพื่อดึงตำแหน่งปัจจุบันของผู้ใช้
  Future<void> _getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    // ตรวจสอบว่าเปิด Location Services ไว้หรือไม่
    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      // หาก Location Services ปิด แสดงข้อความหรือจัดการตามต้องการ
      return;
    }

    // ตรวจสอบ permission สำหรับตำแหน่งที่ตั้ง
    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        // Permission ถูกปฏิเสธ
        return;
      }
    }

    if (permission == LocationPermission.deniedForever) {
      // Permission ถูกปฏิเสธอย่างถาวร
      return;
    }

    // หาก permission ได้รับการอนุญาต ดึงตำแหน่งที่ตั้งปัจจุบัน
    Position position = await Geolocator.getCurrentPosition();

    // กำหนดตำแหน่งเริ่มต้นเป็นตำแหน่งของผู้ใช้
    setState(() {
      // กำหนดค่าให้กับตำแหน่งเริ่มต้น แล้วสร้างรูปแบบพิกัดไว้ใช้งาน 
      // ค่า bearing และ tilt หากไม่กำหนด ก็จะใช้เป็น 0 ตามค่าเริ่มต้น ในที่นี้เราใช้แค่
      // ตำแหน่ง กับ การ zoom
      _initialPosition = CameraPosition(
        target: LatLng(position.latitude, position.longitude),
        zoom: 14.0,
      );

      // อัปเดตตำแหน่งของ active marker
      _activeMarkerPosition = LatLng(position.latitude, position.longitude); 

      // เพิ่ม Marker สำหรับตำแหน่งปัจจุบัน
      _markers.add(
        Marker(
          markerId: _markerId,
          position: _activeMarkerPosition!,
          icon: _markerIcon!, // กำหนดไอคอนจาก asset
          draggable: true, // เปิดใช้งานการลาก marker
          infoWindow: InfoWindow(
            title: 'ตำแหน่งของคุณ',
            // ข้อความเพิ่มเติมที่จะแสดงใน InfoWindow
            snippet: '${_activeMarkerPosition!.latitude}, ${_activeMarkerPosition!.longitude}', 
            onTap: () async {
              print("hide infowindow");
              final GoogleMapController controller = await _controller.future;
              controller.hideMarkerInfoWindow(_markerId);   
            }
          ),
          onTap: () async {
              
          },          
          onDragEnd: (LatLng newPosition) {
              print("Marker dropped at: ${newPosition.latitude}, ${newPosition.longitude}");
              // อัปเดตตำแหน่งของ active marker
              _activeMarkerPosition = LatLng(newPosition.latitude, newPosition.longitude);                      
              // สามารถจัดการตำแหน่งใหม่ได้ที่นี่ เช่น อัปเดตตำแหน่งในฐานข้อมูลหรือแสดงข้อมูลใหม่       
              CameraPosition _newPosition = CameraPosition(
                target: LatLng(newPosition.latitude, newPosition.longitude),
                zoom: 14.0,
              );

              // เรียกใช้ ฟังก์ชั่นสำหรับ กรณีไปยังตำแหน่งใดๆ ที่ต้องการ ตามค่าที่ส่งเข้าไป 
              _goToPosition(_newPosition);   
              // เรียกใช้งานฟังก์ชัน อัปเดทตำแหน่งตัว markder และ ข้อความภายในที่แสดง
             _updateMarkerSnippet(_markerId,_activeMarkerPosition!);
            },          
          
        ),
      );

    });

    // เรียกใช้ GoogleMapController เพื่อแสดง InfoWindow อัตโนมัติ
    final GoogleMapController controller = await _controller.future;
    controller.showMarkerInfoWindow(_markerId);

  }

  // ฟังก์ชั่น อัปเดทตำแหน่งตัว markder และ ข้อความภายในที่แสดง
  void _updateMarkerSnippet(MarkerId markerId, LatLng newPosition) {
    // ตรวจสอบหาตัว markder เดิม ที่ไอดีตรงกับที่ส่งมา
    Marker? oldMarker = _markers.firstWhere(
      (marker) => marker.markerId == markerId,
      orElse: () => null as Marker,  // ใช้ cast เป็น markder เพื่อเลี่ยง null safely
    );

    if (oldMarker != null) { // ถ้าไม่ใช่ null
      // ลบ markder ตัวเดิม
      _markers.remove(oldMarker);
      // กำหนดข้อมูลที่แสดงใน infowindow ใหม่ เป็นค่าพิกัดใหม่
      String newSnippet = '${newPosition.latitude}, ${newPosition.longitude}';

      // เพิ่มตัว markder ตัวใหม่เข้าไป
      _markers.add(
        Marker(
          markerId: markerId, // ใช้ไอดีเดิม
          position: newPosition, // ตำแหน่งใหม่
          icon: _markerIcon!, // กำหนดไอคอนจาก asset
          draggable: true, // เปิดใช้งานการลาก marker          
          infoWindow: InfoWindow(
            title: oldMarker.infoWindow.title, // ใช้จากค่าเดิม
            snippet: newSnippet,  // อัปเดทค่าใหม่
            onTap: oldMarker.infoWindow.onTap, // ใช้จากค่าเดิม
          ),
          onTap: oldMarker.onTap, // ใช้จากค่าเดิม
          onDragEnd: oldMarker.onDragEnd, // ใช้จากค่าเดิม
        ),
      );

      // rebuild เพื่ออัปเดทแผนที่
      setState(() {});
    }
  }  

  // ฟังก์ชั่นเฉพาะ กรณีเราต้องการให้ไปยังตำแหน่ง ที่เจาะจง ในที่นี้คือไปตำแหน่ง ห้าง มาบุญครอง
  Future<void> _goToMBK() async {
    final GoogleMapController controller = await _controller.future;
    await controller.animateCamera(CameraUpdate.newCameraPosition(_place_mbk));
  }

  // ฟังก์ชั่นสำหรับ กรณีไปยังตำแหน่งใดๆ ที่ต้องการ ตามค่าที่ส่งเข้าไป 
  Future<void> _goToPosition(CameraPosition postion) async {
    final GoogleMapController controller = await _controller.future;
    await controller.animateCamera(CameraUpdate.newCameraPosition(postion));

    // อัปเดทตำแหน่งตัว markder และ ข้อความภายในที่แสดง
    _updateMarkerSnippet(_markerId,postion.target!);

    // เรียกใช้ GoogleMapController เพื่อแสดง InfoWindow อัตโนมัติ
    controller.showMarkerInfoWindow(_markerId);

  }  

  // ฟังก์ชั่นการกดที่แผนที่ แล้วไปยังตำแหน่งที่ต้องการ
  void _onMapTapped(LatLng position) {
    // อัปเดตตำแหน่งของ active marker
    _activeMarkerPosition = LatLng(position.latitude, position.longitude);                      
    // สามารถจัดการตำแหน่งใหม่ได้ที่นี่ เช่น อัปเดตตำแหน่งในฐานข้อมูลหรือแสดงข้อมูลใหม่       
    CameraPosition _newPosition = CameraPosition(
      target: LatLng(position.latitude, position.longitude),
      zoom: 14.0,
    );    
    // เรียกใช้ ฟังก์ชั่นสำหรับ กรณีไปยังตำแหน่งใดๆ ที่ต้องการ ตามค่าที่ส่งเข้าไป 
    _goToPosition(_newPosition);   
  }

  @override
  void dispose() {
    super.dispose();
  }  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('แผนที่'),
      ),
      body: _initialPosition == null  // กรณียังไม่ได้ตำแหน่ง แสดงตัว Loading ก่อน
          ? const Center(child: CircularProgressIndicator()) // Loading หรือจะใช้รูปแบบอื่นๆ แทนได้ถ้าต้องการ
          : Stack( // ใช้ stack ในการวางซ้อนแผนที่ รองรับการเพิ่มเมนูไอคอนต่างๆ
              children: [
                GoogleMap(
                  mapType: MapType.normal, // normal | terrain | satellite | hybrid
                  initialCameraPosition: _initialPosition!, // ใช้ค่าเริ่มต้นจากตำแหน่งของเรา
                  onMapCreated: (GoogleMapController controller) {
                    // ทำให้ Future สำเร็จเมื่อแผนที่ถูกสร้างเสร็จแล้ว
                    // ตัว controller พร้อมใช้งาน
                    _controller.complete(controller);
                  },
                  // ในที่นี้เราจtซ่อนตัวปุ่ม zoom และกำหนดเอง จากปุ่มที่เราสร้าง
                  zoomControlsEnabled: false, // ซ่อนค่าเริ่มต้นปุ่ม zoom
                  // ในที่นี้เราจะซ่อนตัวปุม ตำแหน่งปัจจุบัน และกำหนดเองจากปุ่มที่เราสร้าง
                  myLocationButtonEnabled:
                      false, // ซ่อนปุ่มตำแหน่งปัจจุบัน
                  myLocationEnabled: false, // แสดงรูป จุด ของตำแหน่งปัจจุบัน
                  markers: _markers, // เพิ่ม markers ใน GoogleMap
                  onTap: _onMapTapped, // เมื่อกดที่แผนที่ให้ทำคำสั่ง
                ),
                // ส่วนควบคุมการ Zoom ที่เราสร้างเอง
                Positioned(
                  top: 16,
                  right: 16,
                  child: Column(
                    children: [
                      FloatingActionButton(
                        mini: true,
                        onPressed: () async {
                          // ควบคุมการ Zoom In
                          final controller = await _controller.future;
                          controller.animateCamera(CameraUpdate.zoomIn());
                        },
                        heroTag: 'zoomin', // Set a unique tag ต้องกำหนด
                        child: const Icon(Icons.add),
                      ),
                      const SizedBox(height: 8),
                      FloatingActionButton(
                        mini: true,
                        onPressed: () async {
                          // ควบคุมการ Zoom Out
                          final controller = await _controller.future;
                          controller.animateCamera(CameraUpdate.zoomOut());
                        },
                        heroTag: 'zoomout', // Set a unique tag ต้องกำหนด
                        child: const Icon(Icons.remove),
                      ),
                    ],
                  ),
                ),
                // ส่วนควบคุมตำแหน่งปัจจุบัน ที่เราสร้างเอง
                Positioned(
                  bottom: 16,
                  right: 16,
                  child: FloatingActionButton(
                    onPressed: () {
                      // ไปยังตำแหน่ง จากพิกัด
                      _goToPosition(_initialPosition!);
                    },
                    heroTag: 'mylocation', // Set a unique tag ต้องกำหนด
                    child: const Icon(Icons.my_location),
                  ),
                ),
              ],
            ),
    );
  }
}