[How To] การติดตั้ง Google Maps for Flutter เบื้องต้น
Tags: dart, flutter, programming, tutorial
Published: 2020-07-23 09:10:54

วันนี้ผมจะมาแนะนำและวิธีการใช้งานเบื้องต้นของ plugin ที่น่าสนใจตัวหนึ่งที่มีชื่อว่า 
"Google Maps for Flutter" <br/>
โดย plugin ตัวนี้จะให้ Google Maps ที่เป็น Widget มาให้เราได้เปิดใช้งานแผนที่ของกูเกิ้ล


![](https://1.bp.blogspot.com/-siXqlvlL0e0/Xwbpw5apCWI/AAAAAAAAAC0/uHJAPJtGIREEKvxT9FlnPq1GaZPoJoZrACLcBGAsYHQ/s650/Screen%2BShot%2B2563-07-09%2Bat%2B16.54.28.png)

### ขั้นตอนการติดตั้ง
 อันดับแรก เราต้องทำการขอ API Key ที่ลิ้งค์ [https://cloud.google.com/maps-platform/](https://cloud.google.com/maps-platform/) <br/>
 เมื่อเข้ามาหน้าเว็บไซต์แล้วให้เข้าไปที่ Console (ตรงขวามุมบนของหน้าจอ)
 
![](https://1.bp.blogspot.com/-8aU2-uliQeI/Xwbr46p60uI/AAAAAAAAADE/fSFVTh5p-34IGiPEKBfyvY_LDZR1oP5YACLcBGAsYHQ/s2372/1.png)


สร้าง Project ของเราขึ้นมาก่อน

![](https://1.bp.blogspot.com/-0FSM5Aw3ze0/XwbtIaCUiEI/AAAAAAAAADQ/6iEKW3lrgEMgX1CZPv8YmCFXm-5WuEMxQCLcBGAsYHQ/s2372/Screen%2BShot%2B2563-07-09%2Bat%2B17.09.41.png)

เมื่อทำการสร้างเสร็จแล้วให้เปิดแท็บด้านขวามือ แล้วเลือกเมนูที่ชื่อว่า Google Maps

![](https://1.bp.blogspot.com/-PiZD8uSAl1I/Xwbt0bC6dGI/AAAAAAAAADY/1Ijcrk2BMzQMcqpZMjI47C3xm6kbE9fAwCLcBGAsYHQ/s2372/Screen%2BShot%2B2563-07-09%2Bat%2B17.13.17.png)

Google Maps จะมี​ API ให้ใช้หลายตัว เราสามารถเข้าไป Enable เพื่อที่จะเรียกใช้ API เหล่านั้นได้ <br/>
แต่ตอนนี้เราจะเลือก Enable Maps SDK for Android / IOS เพื่อที่จะเอา API Key ไปเรียกใช้งาน API เหล่านี้

![](https://1.bp.blogspot.com/-6-m497ds9_0/XwbuYDcCN7I/AAAAAAAAADg/b-LEZEbVOOoMgyZeANK5_hsUN-etR3WogCLcBGAsYHQ/s2372/Screen%2BShot%2B2563-07-09%2Bat%2B17.15.41.png)

ต่อมาให้เข้าไปที่เมนู Credentials เพื่อที่จะสร้าง API Key เอาไปแปะในโค้ดให้เชื่อมต่อกับ Google Cloud Platform <br/>
กดเลือก Create Credentials -> API Key

![](https://1.bp.blogspot.com/-eGjjbtDPREA/XwbwnqBSppI/AAAAAAAAADs/VDgtQzy3W-sAIddxl6pK7AQqmmCniX-ygCLcBGAsYHQ/s2372/Screen%2BShot%2B2563-07-09%2Bat%2B17.24.49.png)

เราก็จะได้ API Key มาเท่านี้ก็จะสามารถเชื่อมต่อกับ Google Map Api ได้

![](https://1.bp.blogspot.com/-BJedIQDH4QA/XwbxXVuwoMI/AAAAAAAAAD4/eEW6JBcVWlIpkXiNj_C_hPkLxpzLosFGACLcBGAsYHQ/s2368/Screen%2BShot%2B2563-07-09%2Bat%2B17.27.16.png)

### มาในส่วนของการเขียนโค้ดกันบ้าง
สำหรับ 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 เข้าไป

```dart
<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")`

```dart
@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

```dart
<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) </br>


```dart
dependencies:
  flutter:
    sdk: flutter

  google_maps_flutter: ^0.5.28+1

  ...
```

import Libray 

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

สร้างตัวแปรประเภท `GoogleMapController` คือ class ที่เอาไว้สร้าง Future อีกที เอาไว้ควบคุมการทำงาน

```dart
class _MyHomePageState extends State<MyHomePage> {
  
  Completer<GoogleMapController> _controller = Completer();

```

Library จะมี Widget มาให้ชื่อว่า `GoogleMap()` </br>
ทดลองพิมพ์ตามโค้ดด้านล่างนี้
```dart
 @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

![](https://1.bp.blogspot.com/-q9eF89m8xFg/XxlSMH_TCYI/AAAAAAAAAE8/hLndX_a9brIxyz7o1-18rHLjjUiCyyNkwCLcBGAsYHQ/s450/Screen%2BShot%2B2563-07-23%2Bat%2B15.54.33.png)

เพียงเท่านี้ก็จะสามารถเปิดกูเกิ้ลแมพได้ บทความนี้จะเป็นการติดตั้งเบื้องต้น และบทความต่อไปจะเป็นการใช้งานเบื้องต้นเกี่ยวกับ GoogleMap, Polyline, Marker