เนื้อหาตอนต่อไปนี้ เรามาดูเกี่ยวกับการแสดงแผนที่ในแอป โดยใช้
งาน google_maps_flutter เป็นแพ็กเก็จที่ใช้งานกับ Google Map
โดยตรง ทำให้เราสามารถนำแผนที่มาปรับใช้งานได้แอปได้ง่าย การแสดง
แผนที่ในแอป ขึ้นอยู่กับว่าเราต้องการทำงานในลักษณะไหน เช่น แค่แสดง
แผนที่ธรรมดาไม่มีฟังก์ชั่นอื่นๆ ในลักษณะนี้ เราอาจจะไม่จำเป็นต้องใช้ก็ได้
แต่ใช้เป็นแบบแสดงผ่าน inappwebview แทนโดยฝัง html เพื่อแสดง
แผนที่ อย่างไรก็ตาม ถ้าเราต้องการใช้รูปแบบแผนที่ และอาจจะมีรองรับการทำงาน
ต่างๆ เช่น การระบุตำแหน่งปัจจุบัน การหาพิกัดของสถานะหรืออื่นๆ การใช้งาน
google_maps_flutter ถือเป็นวิธีที่ดี ง่ายและสะดวก
ติดตั้ง package ที่จำเป็นเพิ่มเติม ตามรายการด้านล่าง
แพ็กเก็จที่จำเป็นต้องติดตั้งเพิ่มเติม สำหรับการทำงานมีดังนี้
google_maps_flutter: ^2.9.0 geolocator: ^13.0.1 permission_handler: ^11.3.1
แพ็กเก็จที่จำเป็นหลักๆ จะมีประมาณนี้ จริงๆ แล้ว permission_handler ควรจะเป็นแพ็กเก็จสำคัญ
ของทุกแอปใน flutter เพราะปัจจุบันเราจำเป็นต้องขอสิทธิ์การเข้าถึงส่วนต่างๆ แบบ runtime หรือ
ขณะเรียกใช้งาน ในส่วนของ geolocator จะเป็นส่วนสำหรับใช้ในการขอตำแหน่งปัจจุบันของเรา โดย
จะนำไปใช้งานร่วมกับ google_maps_flutter ที่ใช้แสดงแผนที่อีกที
การเตรียมการตั้งค่าต่างๆ ก่อนเรียกใช้งาน (API Key)
ในการใช้งาน Google Map เราเคยมีบทความเกี่ยวกับการแสดงแผนที่ไว้ค่อนข้างมากในเว็บ สำหรับ
การแสดงแผนที่ในแอป ก็เช่นกัน จะขาดไม่ได้ก็คือ API Key การตั้งค่าต่างๆ นี้สามารถดูเพิ่มเติมได้
ที่ในหน้าของแพ็กเก็จ เราจะอธิบายคร่าวๆ อย่างง่าย่ ดังนี้
* API Key ของ Android / Web และ iOS เราควรสร้างแยกกัน เพื่อจะได้จำกัดการเข้าถึง
ได้อย่างเหมาะสมตามแต่ platform นั้นๆ
1. เข้าไปใช้งานในส่วนของ Google Developers Console
ถ้ายังไม่มีโปรเจ็ค ก็ให้สร้างใหม่ หรือจะสร้างโปรเจ็คใหม่สำหรับแผนที่โดยเฉพาะก็ได้
ในตัวอย่างเรามีโปรเจ็คอยู่แล้ว ก็ไม่ได้สร้างอะไร
2. หลังจากเข้ามาในส่วนของโปรเจ็คที่จะใช้งานแล้ว ให้เราเปิดใช้งาน ส่วนของแผนที่ หรือ SDK
สำหรับแต่ละ platform > Enable API & services
3. ค้นหาคำว่า Map กดเช้าไปแต่ละ SDK ที่ต้องการแล้วเปิดใช้งานหรือ Enable ในตัวอย่างเราจะ
เปิดใช้งานเฉพาะส่วนของ android
4. หลักจากเปิดใช้งานเรียบร้อยแล้ว ต่อไปเราจะมาสร้างการรับรองการใช้งาน (credential) หรือในที่นี้
ก็คือเราจะต้องสร้าง API Key นั้นเอง
5. เมื่อเรากดเลือก API Key เรียบร้อยแล้ว ระบบจะสร้าง API Key ให้เราสักพัก เสร็จแล้วก็จะแสดง
ในหน้ารายการ ให้เรากดเข้าไปแก้ไข โดยปรับแต่งตามต้องการ หลักๆ เราอาจจะเปลี่ยนชื่อ และก็กำหนด
ให้ใช้งานเฉพาะส่วนของ platform ที่ต้องการ ในตัวอย่างเราจะใช้เฉพาะ Android เสร็จแล้วกดบันทึก
เป็นอันเสร็จ เราได้ key สำหรับไปใช้งานแล้ว
ดูแนวทางเพิ่มทั้งหมดได้ที่ Maps SDK for Android https://developers.google.com/maps/documentation/android-sdk/get-api-key?hl=th
ตรวจสอบตั้งค่าในส่วนของโปรเจ็ค Flutter
ต่อไปเป็นส่วนของการตั้งค่าในโปรเจ็ค flutter ให้เราทำตามดังนี้
กำหนดสิทธิ์การขอพิกัดตำแหน่ง
ไฟล์ android > app > src > main > AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<!-- เกี่ยวกับการขอพิกัดตำแหน่ง เพิ่ม 2-3 ส่วนนี้ -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!-- Required only when requesting background location access on
Android 10 (API level 29) and higher. -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<application ....
....
</manifest>
โดยแต่ละค่ามีลักษณะแตกต่างดังนี้
ACCESS_FINE_LOCATION แม่นยำสูง เช่น จาก GPS หรือเซ็นเซอร์อื่นๆ ที่ให้ข้อมูลตำแหน่งที่แม่นยำ ACCESS_COARSE_LOCATION แม่นยำต่ำกว่า เช่น จากข้อมูลเครือข่ายมือถือหรือ Wi-Fi โดยความแม่นยำของตำแหน่งอาจ มีช่วงหลายร้อยเมตรถึงกิโลเมตร ACCESS_BACKGROUND_LOCATION การข้อพิกัดในขณะทำงานอยู่เบื้องหลัง
เราควรกำหนดทั้งสองส่วน เพราะในขั้นตอนการขอสิทธิ์จะขึ้นทั้งสองแบบให้เลือกว่าจะใช้แบบไหน
ส่วนการขอสิทธิ์การเข้าถึงตำแหน่งขณะทำงานเบื้องหลัง กรณีแอปเรา ต้องการใช้งานพิกัดเมื่อแอปถูกปิด
ไปหรือไม่ได้แสดงอยู่ด้านหนัา เช่นกรณีกำลังเดินทาง หรืออื่นๆ แต่ยังต้องการส่งพิกัดไว้ ก็ให้ขอสิทธิ์
ส่วนนี้ไว้ด้วย หรือถ้าไม่ได้ใช้ก็ไม่ต้องขอสิทธิ์ก็ได้
และภายใน <application> เพิ่มส่วนนี้เข้าไป
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="API Key ของ Android"/>
ไฟล์ android > app > src > main > AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
.......
<application ....
<activity
android:name=".MainActivity"
android:exported="true"
..........
......
android:hardwareAccelerated="true"
android:showWhenLocked="true"
android:turnScreenOn="true"
android:windowSoftInputMode="adjustResize">
..........
......
<meta-data
android:name="flutterEmbedding"
android:value="2" />
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="API Key ของ Android"/>
</application>
....
</manifest>
ตรวจสอบส่วนของไฟล์ build.gradle ดูส่วนของ Android SDK เวอร์ชั่นอย่างน้อยที่ต้องรับ
minSdk ต้องเป็น Android SDK 20 ขึ้นไป
ไฟล์ android > app > build.gradle
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId = "com.example.demo_app"
multiDexEnabled = true
// You can update the following values to match your application needs.
// For more information, see: https://flutter.dev/to/review-gradle-config.
minSdk = 26
targetSdk = 35
// minSdk = flutter.minSdkVersion
// targetSdk = flutter.targetSdkVersion
versionCode = flutter.versionCode
versionName = flutter.versionName
}
การใช้ไอคอนหรือรูปต่างๆ ในแผนที่ กรณีเราอาจจะต้องการใช้รุป หรือไอคอนเพิ่มเในแผนที่
ให้เราเพิ่มส่วนของการจัดการไฟล์ที่เกี่ยวข้องใน โฟลเดอร์ assets ถ้าไม่มีโฟลเดอร์นี้ให้สร้างขึ้นมา
root เดียวกันกับไฟล์ pubspec.yaml โดยในโฟลเดอร์ assets เราจะมีโฟลเดอร์แยกย่อยอีกก็ได้
จากนั้นให้เราจัดการส่วนของการกำหนดไฟล์ที่จะใช้ในแอป ในตัวอย่าง เราจะใช้ทั้งโหลเดอร์ assets
รวมถึงโฟลเดอร์ด้านไหนทั้งหมด เพื่อให้สะดวก หรือเราจะแยกเป็นแต่ละโฟลเดอร์ที่จำเป็นก็ได้ เช่น
assets:
- assets/
# - assets/images/
# - assets/icon/
ไฟล์ pubspec.yaml
นำไอคอน หรือรูปที่ต้องการใช้งานร่วมกับ แผนที่ มาไว้ในโฟลเดอร์นี้ แล้วเรียกใช้งาน
ถ้ามาถึงตรงนี้ แสดงว่าเราได้เตรียมความพร้อมสำหรับการใช้งาน Google map ใน Flutter
เรียบร้อยแล้ว ในตอนหน้าเราจะมาเริ่มใช้งาน Google Map Flutter กัน รอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง