FlutterでGoogleマップを表示する方法

2021-05-20

アプリ開発

はじめに

とてもめでたい話で家族が増えました。男の子が生まれたのです。朝から里帰りしている嫁の実家や病院と、300km程離れた家を往復する生活でしたが一段落です。良かった。

このブログでは、新しい家族が増えたことを記念して、子どもたちに何か聞かれた時に教えて上げられるように準備することと、ブログの収益化を目指しています。今回は、皆が好きなFlutterでGoogleマップを表示する方法を解説します。

このブログについて

子供の給付金や何かとこれからお金が入り用になりますがままならないですね。

さて、このブログには2つテーマがあります。

子どもたちに何か聞かれた時に教えて上げれるように準備すること
ブログの収益化

特に2つ目のブログの収益化です。この赤字運営ブログを攻めて黒字運営にしたい。常々考えていたのですよ。たまには、ウケが良さそうな記事を書こうと思います。ウケが良いということはやっていて私も楽しい話がいいですよね。

そうですよ、みんな大好き！Flutter!!!! 久しぶりやっていきましょう！Flutter!!!! みんな使ってみたいですよね！！Google map!!!! さぁさぁ早速やっていきましょう!!!!!

Flutter でGoogle mapを呼び出すコード

次の手順で進めます。

GoogleマップAPIを取得します。
Flutterプロジェクトを作成し、google_maps_flutterパッケージをインストールします。
Android向けの設定を行います（iOS向けは公式サイトを参照してください）。
main.dartにサンプルコードを追加し、アプリを実行します。

google Map APIを取得

Google Maps Platform まずは、このサイトからGoogle Mapを操作するためのAPIを取得しましょう。以前は、無料で使えたこのAPIも今や有料になっています。ただ、毎月 $200 分が無料利用できるため開発用途に使う分には問題ないでしょう。

※ちなみに、モバイル向けの地図表示だけであれば無料で使えるようですね。

右上の「始める」をクリックしてAPIを設定します。使用する、APIを有効化します。全部使ってみたいので全部にチェック入れましょう。チェックして「有効にする」をクリックすると準備は終わりです。

開発の準備ができればAPIキーを取得できます。このAPIキーをコピペしておいてください。

Flutter Projectの作成

google_maps_flutterをインストール

google_maps_flutter

Flutterプロジェクトに pub.devからパッケージを追加する。

flutter pub add google_maps_flutter

Android向けの準備

iOS向けの開発であれば、公式サイトを参考にAPIキーを呼び出せるように作り込みます。 Android向けであれば、build.gradleとAndroidManifest.xmlに何行か追加します。

　android/app/build.gradle

defaultConfigの中にminSdkVersion 20を追加します。

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.database_map"
    minSdkVersion 16
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
+    minSdkVersion 20
}

android/app/src/main/AndroidManifest.xml

先程取得したAPIキーと合わせて、パッケージで使用するGEO APIを使う変数を定義します。このような形で定義すれば良いでしょう。

<meta-data
    android:name="flutterEmbedding"
    android:value="2" />
+<meta-data
+    android:name="com.google.android.geo.API_KEY"
+    android:value="取得したAPIキーを入れます" />
/>

main.dart

まずは、サンプルをそのまま呼び出してみましょう。

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