[How To] การติดตั้ง Google Maps for Flutter เบื้องต้น
natcha.s_
Posted on July 23, 2020
วันนี้ผมจะมาแนะนำและวิธีการใช้งานเบื้องต้นของ plugin ที่น่าสนใจตัวหนึ่งที่มีชื่อว่า
"Google Maps for Flutter"
โดย plugin ตัวนี้จะให้ Google Maps ที่เป็น Widget มาให้เราได้เปิดใช้งานแผนที่ของกูเกิ้ล
ขั้นตอนการติดตั้ง
อันดับแรก เราต้องทำการขอ API Key ที่ลิ้งค์ https://cloud.google.com/maps-platform/
เมื่อเข้ามาหน้าเว็บไซต์แล้วให้เข้าไปที่ Console (ตรงขวามุมบนของหน้าจอ)
สร้าง Project ของเราขึ้นมาก่อน
เมื่อทำการสร้างเสร็จแล้วให้เปิดแท็บด้านขวามือ แล้วเลือกเมนูที่ชื่อว่า Google Maps
Google Maps จะมี API ให้ใช้หลายตัว เราสามารถเข้าไป Enable เพื่อที่จะเรียกใช้ API เหล่านั้นได้
แต่ตอนนี้เราจะเลือก Enable Maps SDK for Android / IOS เพื่อที่จะเอา API Key ไปเรียกใช้งาน API เหล่านี้
ต่อมาให้เข้าไปที่เมนู Credentials เพื่อที่จะสร้าง API Key เอาไปแปะในโค้ดให้เชื่อมต่อกับ Google Cloud Platform
กดเลือก Create Credentials -> API Key
เราก็จะได้ API Key มาเท่านี้ก็จะสามารถเชื่อมต่อกับ Google Map Api ได้
มาในส่วนของการเขียนโค้ดกันบ้าง
สำหรับ Android ให้เข้าไปเพิ่ม API Key ที่ไฟล์ AndroidManifest.xml ในโฟลเดอร์
Android (android/app/src/main/AndroidManifest.xml)
.
└── android
└── app
└── src
└── main
└── AndroidManifest.xml
ให้เพิ่ม <uses-permission/>
เพื่อขอ permission
กับ <meta-data/>
เพื่อเพิ่ม API KEY เข้าไป
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.fluttergooglemap">
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<application
android:name="io.flutter.app.FlutterApplication"
android:label="fluttergooglemap"
android:icon="@mipmap/ic_launcher">
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR API KEY"/>
<activity
android:name=".MainActivity"
...
สำหรับ IOS เข้าไปที่ไฟล์ AppDelegate.swift (ios/Runner/AppDelegate.swift)
.
└── ios
└── Runner
├── AppDelegate.swift
└── Info.plist
เพิ่ม API KEY เข้าไป GMSServices.provideAPIKey("YOUR KEY HERE")
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("YOUR API KEY")
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
และเข้าไปที่ไฟล์ info.plist เพิ่มคำส่ัง เพื่อขอ permission
<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/>
...
เข้าไปที่ไฟล์ pubspec.yaml
ติดตั้ง google_maps_flutter: ^0.5.28+1
(เวอร์ช้่นล่าสุดเมื่อ May 21, 2020)
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^0.5.28+1
...
import Libray
import 'package:google_maps_flutter/google_maps_flutter.dart';
สร้างตัวแปรประเภท GoogleMapController
คือ class ที่เอาไว้สร้าง Future อีกที เอาไว้ควบคุมการทำงาน
class _MyHomePageState extends State<MyHomePage> {
Completer<GoogleMapController> _controller = Completer();
Library จะมี Widget มาให้ชื่อว่า GoogleMap()
ทดลองพิมพ์ตามโค้ดด้านล่างนี้
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(13.757429, 100.502465), //กำหนดพิกัดเริ่มต้นบนแผนที่
zoom: 15, //กำหนดระยะการซูม สามารถกำหนดค่าได้ 0-20
),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
);
}
เริ่มต้น GoogleMap จะต้อง initialCameraPosition
เสมอ โดยกำหนดพิกัดจุดเริ่มต้นสถานที่จะให้ GoogleMap แสดงขึ้นมา แล้วลอง Run
เพียงเท่านี้ก็จะสามารถเปิดกูเกิ้ลแมพได้ บทความนี้จะเป็นการติดตั้งเบื้องต้น และบทความต่อไปจะเป็นการใช้งานเบื้องต้นเกี่ยวกับ GoogleMap, Polyline, Marker
Posted on July 23, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.