FlutterでGoogleMapを表示する

はじめに
- 使うもの
実装していく
- Google Maps Platform側の準備
Flutter側の準備

はじめに

FlutterアプリにGoogleMapを表示する方法をご紹介します。
今回は基礎編①ということでGoogleMapを表示するための最低限の実装でご説明したいと思います。

使うもの

Google Maps Platform
Google社が公開しているGoogleMapのAPIを公開しているプラットフォームです。
こちらからAPIキーを取得します。
google_maps_flutter
GoogleMapを表示するためのFlutterパッケージです。Google社の公式Flutterチームが開発しているため信頼性が高く、今後の機能追加も活発に行われていくのではないかと思います。

実装していく

Google Maps Platform側の準備

まずはiOS用APIとAndroid用APIの有効化と、APIキーの取得を行います。
下記のGoogleMapsPlatformにアクセスして、右上の「使ってみる」ボタンをクリック。
自身のGoogleアカウントでログインしましょう。

Google Maps Platform - 位置情報およびマッピングソリューション

Google Maps Platform の位置情報ソリューションでは、動的なマップ、ルート、プレイス用の API を使用して、現実世界のリアルタイムエクスペリエンスを作成し、顧客に提供できます。

Google Maps Platformは月200ドル分が無料で利用できます
APIリクエスト数に換算すると月28,000回。つまり1日1000リクエスト程度であれば無料ですので個人開発においては十分に利用できる範囲かと思います。
詳細な料金はこちらをご参照ください。

次に左のタブメニューから「API」を選択し、メイン画面から「Maps SDK for iOS」を選択します。

「有効にする」を押します。
これでiOS用APIの有効化が完了しました。

Android用のAPIキーについても同様に「Maps SDK for Android」から有効にしてください。

最後に左メニューの「認証情報」を選択し、「＋認証情報を作成」→「APIキー」を選択します。
そうしますとAPIキーが作成され、画面中央あたりのリスト部分に表示されます。
以上でGoogle Maps Platform側の準備は完了です。

Flutter側の準備

パッケージ導入

今回利用するFlutterパッケージgoogle_maps_flutterを導入します。
pubspec.yamlファイルに以下記載を追加しましょう。
なお、本記事執筆時点の最新版である2.1.4を導入しておりますが、
ご利用される際は最新バージョンを公式サイトから確認してください。

dependencies:
  google_maps_flutter: ^2.1.4

iOS側の設定

google_maps_flutterパッケージを利用するにはiOS側とAndroid側それぞれで設定が必要です。
まずはiOS側の設定をご説明します。

ios/Runner/AppDelegate.swiftに以下の２行を追加してください。
「APIキー」の部分は先ほど登録したAPIキーをコピペで入れてください。

import UIKit
import Flutter
import GoogleMaps  //←追加

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("APIキー") //←追加
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Android側の設定

1.SDKバージョンの設定

google_maps_flutterを使うには、最低でも20以上のSDKバージョンが必要です。
android/app/build.gradleのminSdkVersionを20に変更しましょう。

android {
    defaultConfig {
        minSdkVersion 20
    }
}

2.APIキーの設定

APIキーを設定します。android/app/src/main/AndroidManifest.xmlの
<application>の階層に<meta-data…以降を丸ごとコピペしてください。

APIキーはiOSと同じもので構いません。

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="APIキーを入力"/>

以上で準備完了です！

GoogleMapを表示する

では、いよいよGoogleMapを表示してみましょう。
公式のサンプルは少々複雑な作りになっているため、今回は最低限GoogleMapを表示するところまでのコードとします。

コード

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

void main() {
  runApp(MaterialApp(home: MyMap()));
}

class MyMap extends StatefulWidget {
  @override
  State<MyMap> createState() => _MyMapState();
}

class _MyMapState extends State<MyMap> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: CameraPosition( //マップの初期位置を指定
            zoom: 17,                         //ズーム
            target: LatLng(35.0, 135.0),     //経度,緯度
            tilt: 45.0,                     //上下の角度
            bearing: 90.0),                //指定した角度だけ回転する
      ),
    );
  }
}