FlutterでGoogle Mapsを表示するシンプルな実装

Flutterで地図のあるアプリを作るとき、最初に候補にあがるのがGoogle Mapsだと思います。 今回はFlutterでGoogleMapsを表示してみます。

google_maps_flutterパッケージを利用して、API Keyの取得〜マップの表示の実装までをまとめます。

FlutterでGoogle Mapsを表示する流れ

パッケージの入手

pub.dev

まずはパッケージを手に入れましょう。pubspec.yamlに以下を追記します。

google_maps_flutter: 0.5.33

API Keyの取得

Google Mapsの利用にはAPI Keyが必要です。 入手する方法は上記のサイトの通りですが、

console.cloud.google.com

このサイトにアクセスして、

• Google Mapsを使いたいプロジェクトを選択
• ナビゲーションメニューから「Google Maps」を選択
• 「APIs」を選択
• Android用に有効にしたいなら、Maps SDK for Android を ENABLE にする
• iOS用に有効にしたいなら、Maps SDK for iOS を ENABLE にする
• Enabled APIs セクションで、有効にしたAPIを確認する

といった手順で発行できます。

iOS/Androidアプリへの設定

API Keyの設定をOSごとに行います。

iOS

ios/Runner/AppDelegate.swift を開いて、以下を追記：

// ここを追記
import GoogleMaps 

...

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)
}

Android

android/app/src/main/AndroidManifest.xml を開いて、以下を追記：

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

ここまでで準備は整いました。

Google Mapsを表示する

パッケージを利用したい画面で以下を宣言します。

import 'package:google_maps_flutter/google_maps_flutter.dart';

Google MapsはStatefulなWidgetで使います。

class MyMapPage extends StatefulWidget {
  @override
  State<MyMapPage> createState() => _MyMapPageState();
}

class _MyMapPageState extends State<MyMapPage> {
  ...
}

まずはcontrollerを用意します。

Completer<GoogleMapController> _controller = Completer();

最初に表示する中心地を決めて、

final CameraPosition _initPosition =
      CameraPosition(target: LatLng(36.566449, 137.6621042), zoom: 11);

Widget を buildします。

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        initialCameraPosition: _initPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
    );
  }

これだけで地図が表示できました。シンプルですね。

FlutterでGoogle Mapsを表示

マーカーを表示する

マーカーも表示してみましょう。 GoogleMapを作る際に markers パラメータに値を渡すことで表示します。

まず、マーカーを作る処理はこのようになります。

// マーカーを追加
var marker = new Marker(
    markerId: MarkerId("marker-1"), position: _initPosition.target);
Set<Marker> markers = [marker].toSet();

position には _initPosition.target を渡して、画面の中心にマーカーが立つようにしています。 また、markers は Set である必要があるので、今回は toSet() で変換しました。

これを以下のようにGoogleMapに渡します。

@override
  Widget build(BuildContext context) {
    // マーカーを追加
    var marker = new Marker(
        markerId: MarkerId("marker-1"), position: _initPosition.target);
    Set<Marker> markers = [marker].toSet();

    return new Scaffold(
      body: GoogleMap(
        initialCameraPosition: _initPosition,
        markers: markers,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
    );
  }

これでマーカーを表示できました。

FlutterでGoogle Mapsとマーカーを表示

まとめ

FlutterでGoogle Mapsを表示する流れを書きました。シンプルなコードでリッチなマップ機能を利用できます。 この記事がどなたかのお役に立てるとうれしいです。