Flutter GoogleMaps

พัฒนาโดย

อาจาย์พิศาล สุขขี

phisan.s@sskru.ac.th

สาขาวิทยาการคอมพิวเตอร์, คณะศิลปศาสตร์และวิทยาศาสตร์ มหาวิทยาลัยราชภัฏศรีสะเกษ

Packages we are using:

• google_maps_flutter: link
• geolocator: link

Description:

โมบายแอปพลิเคชั่นนี้พัฒนาขึ้นเพื่อใช้เป็นสื่อการเรียนการสอน และตัวอย่างในกรณีศึกษาการพัฒนาโมบายแอปพลิเคชั่นด้วย Flutter ในรายวิชาการพัฒนาโปรแกรมบนมือถือ

เพื่อให้นักศึกษาได้ใช้สำหรับการศึกษา ทดลองปฏิบัติตาม ให้เกิดความรู้ ความเข้าใจ และทักษะในการพัฒนาโปรแกรมบนมือถือด้วย Flutter

เพิ่ม Dependencies ใน Flutter

dependencies:
flutter:
sdk: flutter..cupertino_icons: ^1.0.0geolocator: ^8.0.1google_maps_flutter: ^2.1.1

การใช้งาน

import'package:geolocator/geolocator.dart';
import'package:google_maps_flutter/google_maps_flutter.dart';

เพิ่ม Google Maps API key ในโปรเจค

สำหรับ Android

พอได้ api key แล้วก็ไปที่ android/app/src/main/AndroidManifest.xml เอา API key ไปใส่ไว้ในนี้ โดยเพิ่มเป็น และเพิ่ม permission สำหรับใช้งาน geolocator

<manifest ...
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION" />
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"android:value="YOUR KEY HERE"/>

สำหรับ iOS

สำหรับ iOS จะเพิ่ม API key ที่ ios/Runner/AppDelegate.swift

GMSServices.provideAPIKey("YOUR KEY HERE")

โดยเพิ่มที่

import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain@objcclassAppDelegate:FlutterAppDelegate{overridefunc application(
_ application:UIApplication,
didFinishLaunchingWithOptions launchOptions:[UIApplicationLaunchOptionsKey:Any]?)->Bool{GMSServices.provideAPIKey("YOUR KEY HERE")GeneratedPluginRegistrant.register(with:self)return super.application(application, didFinishLaunchingWithOptions: launchOptions)}}

ปล. ห้ามลืม import GoogleMaps

import GoogleMaps

เพิ่ม permission ที่ ios/Runner/Info.plist

<plist version="1.0"><dict>...<key>NSLocationWhenInUseUsageDescription</key><string>This app needs your location to test the location feature of the Google Maps plugin.</string><key>io.flutter.embedded_views_preview</key><true/></dict></plist>

Geolocator

การใช้งาน Geolocator สำหรับดึงพิกัดปัจจุบันของผู้ใช้งานจากโทรศัพท์ ด้วยการใช้งาน Future

class ... extendsState<MapsPage> {
latePosition userLocation;
lateGoogleMapController mapController;
..
Future<Position> _getLocation() async {
bool serviceEnabled;
LocationPermission permission;
serviceEnabled =awaitGeolocator.isLocationServiceEnabled();
if (!serviceEnabled) {
returnFuture.error('Location services are disabled.');
}
permission =awaitGeolocator.checkPermission();
if (permission ==LocationPermission.denied) {
permission =awaitGeolocator.requestPermission();
if (permission ==LocationPermission.denied) {
returnFuture.error('Location permissions are denied');
}
}
if (permission ==LocationPermission.deniedForever) {
returnFuture.error(
'Location permissions are permanently denied, we cannot request permissions.');
}
userLocation =awaitGeolocator.getCurrentPosition();
return userLocation;
}
..
@overrideWidgetbuild(BuildContext context) {
..

GoogleMap

การสร้าง Map Controller

GoogleMapController mapController;
void_onMapCreated(GoogleMapController controller) {
mapController = controller;
}

ตัวอย่างการเรียกใช้ Wiget GoogleMap()

GoogleMap(
mapType:MapType.normal,
myLocationEnabled:true,
onMapCreated: _onMapCreated,
initialCameraPosition:CameraPosition(
target:LatLng(13.7650836, 100.5379664),
zoom:15),
)

ตัวอย่างการปรับตำแหน่งปัจจุบันบนแผนที่ด้วย animateCamera

mapController.animateCamera(CameraUpdate.newLatLngZoom(
LatLng(userLocation.latitude, userLocation.longitude), 17));

การแสดงผลแผนที่ผ่านหน้าจอ

การแสดงผลแผนที่ผ่านหน้าจอจะเป็นการใช้งาน FutureBuilder สำหรับการแสดงผล โดย แอปพลิเคชันจะทำการดึงพิกัดปัจจุบันของผู้ใช้งานก่อน และค่อยทำการแสดงผลแผนที่ ณ ตำแหน่งปัจจุบันของผู้ใช้งาน

..
body:FutureBuilder(
future:_getLocation(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
returnGoogleMap(
mapType:MapType.normal,
myLocationEnabled:true,
onMapCreated: _onMapCreated,
initialCameraPosition:CameraPosition(
target:LatLng(userLocation.latitude, userLocation.longitude),
zoom:15),
);
} else {
returnCenter(
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[CircularProgressIndicator()],
),
);
}
},
),
..

แหล่งข้อมูลอ้างอิง

• Flutter : การใช้ Google Maps ใน Flutter link
• Working with Geolocation and Geocoding in Flutter (And Integration with Maps) link

ตัวอย่างหน้าจอ User Interface