今天讓我們來鑲嵌 Google Map 至我們的APP吧
相信在許多的應用情境上都會需要 Map 的功能
而在 Flutter 裡，相信大多數人的選擇會是 Google Map 吧（？ 畢竟師出同門嘛
那我們就開始介紹如何使用 Google Map 在 Flutter 中吧！

首先開始前我們先介紹今天要用到的套件 Google_Map_Flutter 是由 Flutter 官方的開發團隊所製作而成的 Map 套件
那我們便開始使用吧
首先在開啟一個新的專案後
執行

flutter pub add google_map_flutter

而匯入套件後
在 Android 及 iOS 的相關設定檔中，都需要額外設定權限及相關功能

Android

設定 SDK 最小版本

打開 android/app/build.gradle 並新增以下資訊

android {
    defaultConfig {
        minSdkVersion 20
    }
}

指定 API Key

打開 android/app/src/main/AndroidManifest.xml 後並設定 API Key

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

iOS

設定 API Key

打開 ios/Runner/AppDelegate.m 並新增以下資訊

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

而若是透過 Swift 撰寫程式的則可修改 ios/Runner/AppDelegate.swift

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

而接下來便是將我們的 Google Map 控制器給導入進來了

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

到上面這步驟後 便可完成基本的 Google Map 功能了
而其中還有許多的參數可以調控
例如配合 API 的存取可以準備 Marker 來進行畫面呈現
因此對應的組合五花八門
可以根據需求來依序做變化

參考資料

強而有力的官網後盾