web analytics

Flutter : การใช้ Google Maps ใน Flutter

สวัสดีผู้อ่านครับ มาลองลองเล่น library ต่างๆใน Flutter กันต่อ บล็อกนี้เป็นคิวของ Google Maps ครับ ซึ่งใน Flutter ก็มี Google Maps Library ให้ใช้งานกัน ความสามารถก็ค่อนข้างครอบคลุม แต่ว่าในขณะที่เขียนบล็อกนี้อยู่นี้ google maps flutter เป็นเวอชัน 0.5.7 และยังอยู่ใน Developer Preview อยู่ด้วย นั่นหมายความว่าอาจจะยังมีบัคและอาจการเปลี่ยนแปลงอีกพอสมควรในเวอชันถัดๆไป โอเค มาลองเล่นกันเล้ยย

เปิดใช้งาน Maps SDK

ก่อนอื่นเปิดใช้งาน Google Maps API กันก่อน โดยไปที่ https://console.cloud.google.com/

ซึ่งให้เปิดใช้งาน 2 อัน คือ Maps SDK for Android และ Maps SDK for iOS

กดปุ่ม enable

จากนั้นไปที่ Credential จะมี API key อยู่ ให้ copy เอาไว้

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

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

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

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

เพิ่ม Dependencies ใน Flutter

จากนั้นเพิ่ม dependencies ใน Flutter โดยตัวอย่างนี้ผมจะใช้งาน 3 ตัว คือ google maps อันนี้แน่นอนอยู่แล้ว location สำหรับรับค่าตำแหน่งของเรา ส่วน url launcher เอาไว้เปิดแอป google maps จากแอปของเรา

โดยเพิ่มที่ไฟล์ pubspec.yaml

การใช้งาน Google Maps

มาลองใช้ google maps กันเลย ก่อนอื่น import package google maps

จากนั้นเพิ่ม Widget ที่ชื่อว่า GoogleMap โดยกำหนด mapType และ camera ให้มัน อีกตัวที่สำคัญคือ GoogleMapController ซึ่งในที่นี้เขาจะใช้ Completer class มันก็คือ class ที่เอาไว้สร้าง Future อีกที

ลองรัน จะได้ map แล้วล่ะ

หากใครที่รันใน emulator แล้ว error เป็นไปได้ว่า emulator นั้นไม่มี google play หรือไม่ก็ google play service เวอชันเก่าเกินไป อ่านวิธีอัพเดทได้ที่ลิงค์ข้างล่าง

เกร็ดเล็กๆเพิ่มอีกนิด คือ mapType มีให้เลือก 4 แบบ

ตัวอย่าง mapType แต่ละแบบ

ค่าการ zoom ของ camera จะมีตั้งแต่ 0-20 โดยยิ่งเลขมากก็ยิ่งซูมมาก

เราสามารถกำหนดให้มีปุ่ม my location ได้ด้วย แค่กำหนด myLocationEnabled

การใช้งาน Location

ถ้าเราอยากรู้ตำแหน่งปัจจุบันของเราล่ะ มาลองใช้งาน library location กัน
ให้ import location เข้ามาก่อน

ประกาศตัวแปร LocationData

ดึงตำแหน่ง location โดยใช้ location.getLocation() ซึ่งต้องระวังกรณีไม่มี permission ด้วย

เขียน method สำหรับนำ currentLocation มาใช้กับ Google Maps
วิธีการคือ เอา Lat Lng มาใส่ใน CameraPosition แล้วกำหนด newCameraPosition ผ่าน GoogleMapController

เพิ่มปุ่มให้ กดแล้วเรียกใช้ method ที่เราทำไว้เมื่อกี้

ลองรันก็จะมีปุ่มเพิ่มขึ้นมาแล้ว โดยเริ่มต้นผมกำหนด Lat Lng ที่อนุเสาวรีย์ชัยฯ

จากนั้นกดที่ปุ่ม My Location แอปจะถามหา permission

หากอนุญาต แอปก็จะเปลี่ยนมุมกล้องไปยังตำแหน่งที่เรากำหนดไว้แล้ว

ซึ่งตัว CameraUpdate ก็มีลูกเล่นพอสมควร เช่นหากเราอยากแค่เปลี่ยนตำแหน่ง แต่ระดับซูมเท่าเดิมเราก็ใช้ CameraUpdate.newLatLng ก็ได้ ตัวอย่างนี้ผมจะให้กดแล้วจะแสดงแผนที่สนามบินสุวรรณภูมิ

เพิ่มไอคอนปุ่มไปที่ AppBar สำหรับกดแล้วแสดงแผนที่สนามบิน

ลองเล่นอีกสักอัน เพิ่มอีกปุ่ม โดยกดแล้วจะขยายออกให้เห็น กรุงเทพทั้งหมด

เพิ่มปุ่มอีกอัน

การใส่ Marker

ปกติในแผนที่ การใช้งานจริงมักจะมีจุดแสดงตำแหน่งด้วย จะเป็นรูปหมุด หรือไอคอนต่างๆ ซี่งเราเรียกว่า Marker การใช้งานง่ายมาก โดย GoogleMap Widget มี field ให้ใส่ markers อยู่แล้วโดยกำหนดเป็น Set ซึ่ง marker แต่ละตัวเราต้องกำหนด id และ Lat Lng ให้มัน แถมยังใส่ชื่อ รายละเอียดได้อีกด้วย

การส่งตำแหน่งไปเปิดในแอป Google Maps

ในหลายๆครั้งแอปของเราก็มีข้อจำกัด เราสามารถส่งตำแหน่งไปให้ผู้ใช้ ใช้งานใน Google Maps ได้เลย เช่นการนำทาง การคำนวณระยะทาง

เริ่มจาก import url_launcher

การใช้งานก็แค่เรียกผ่าน url ของ Google Map ได้เลย โดยส่ง parameter เป็น query ได้เลย ถ้าใครได้อ่านบล็อกของผมเรื่อง Deep link น่าจะรู้ทันทีได้เลยว่า มันคือการใช้ Universal App Link นั่นเอง

ตัวอย่างนี้ ผมจะเพิ่ม onTap ให้กับ Marker ทำให้เมื่อกดที่ marker ก็จะเปิดแอป Google Maps ขึ้นมา

การเพิ่มไอคอนให้ Marker

ไอคอนอันเดิมอาจจะยังไม่เป็นที่ถูกใจเราสามารถเพิ่มไอคอนของเราเป็น marker ได้ โดยกำหนดไอคอนไว้ใน asset folder ก่อน

เพิ่ม path ของ asset ใน pubspec.yaml

ประกาศตัวแปร BitmapDescriptor

เขียน method สำหรับดึง ไอคอนใน asset มาใส่ BitmapDescriptor

เรียกใช้ method นี้ใน build

กำหนด BitmapDescriptor ให้กับ icon ของ Marker ได้เลย

จะได้ไอคอนแบบนี้

ในเวอชันนี้ BitmapDescriptor.fromAssetImage จะยังมีบัคเรื่องของขนาดไอคอนอยู่ ทั้งๆที่สามารถใส่ค่า size ได้ แต่ไม่แสดงผลตามขนาด

การใส่ Polyline

ลองเพิ่ม polyline ใน map กันครับ มันคือการใส่เส้นที่เราต้องการลงไปในแผนที่ ซึ่ง GoogleMap Widget ก็เตรียมไว้ให้แล้ว คือกำหนดที่ polylines โดยสามารถกำหนดได้หลายอัน เพราะเป็น Set และใน polyline แต่ละอัน ก็กำหนด Lat Lng ให้มันลากเส้น จากจุดหนึ่งไปจุดหนึ่ง

ในตัวอย่างนี้มจะลากเส้นรอบพื้นที่สนามบินสุวรรณภูมิ

จะได้แบบนี้

สรุป

Google Maps สำหรับ Flutter ภาพรวมทำได้ดีเลย การใช้งานผ่าน widget ง่ายจริงๆ แม้ว่าจะยังมียัคอยู่บ้างเพราะยังอยู่ใน develoepr preview อยู่ ในอนาคตก็จะเสถียรมากขึ้น เดี๋ยวผมจะมาอัพเดทเรื่อยๆครับ