FlutterでGoogle Mapを呼び出すアプリを作ってみよう

2021-05-20

はじめに

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

このブログについて

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

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

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

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

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

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

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

実行結果

グレイト!パッケージを使うだけでGoogle Mapが簡単に表示できましたね。

To the Lakeを押すと_goToTheLake()が呼び出され、_kLakeの座標に移動します。

まとめ

FlutterでGoogle Mapを動かせるようになりました。 ピンを指して、そのピンの中に店の情報を表示したりするのも楽しそうです。 ぐるなびAPIやHOTPEPPER APIと組み合わせて飲食店検索サービスとかいいですね。 これらのAPIまだ有るのかも分からないですが、確か座標が取得できるのでその座標をPIN刺ししたらいいのではないでしょうか。

このネタで暫くコスれそうですね。