【備忘録】FlutterでGoogleMapを使う

こんにちは

GoogleMap（GoogleMapsPlatForm）って仕様が数年前から少し仕様が変わりましたよね

以前は基本タダで使えましたが、現在はクレジットカードを登録して、

毎月無料分をを超過したら支払う…といったものになりましたね。

ちょこちょこ仕様が変わるGoogleMapsPlatFormでのGoogleMap APIの作成方法と、

アップデートが頻繁に行われているFlutter（つい2週間ほど前にver2.0になった）でGoogleMapを表示させるまでの現時点での設定方法の備忘録になります。

※残念ながら、私の使用しているPCがWindowsなので、今回はAndroidの設定のみになります

Flutterのversionは2.0.1、エディタはAndroidStudioを使用しています。

やっていきましょう

GoogleのFlutterのドキュメントを見ましょう

■モジュールを入れる

「pubspec.yaml」に「google_maps_flutter: ^2.0.1」を入れてくれと記載がありますね

私の「pubspec,yaml」は以下のとおりになりました。（記載したら「Pub get」を押す）

■APIキーの取得

ここからがちょっとめんどくさい

Googleドキュメントを参照。

Google翻訳を使いました。

”各MapsSDKのAPIを用意してくれ、

ただし、iOSとAndroidで同じAPIキーの使用は非推奨な！”って書いてありますね。

GoogleMapsPlatformに行きましょう

「使ってみる」をクリック

Googleアカウントを選択して「続行」

クレジットを入力し、「無料トライアルを開始」を押す

ようこそ！

「新しいプロジェクト」をクリック（勝手に「My First Project」が作られているのでこっち使っても良い）

「作成」を押す

画面右上の通知を開いて作成したプロジェクトを選択

「APIを探索して有効にする」を押す

「APIとサービスの有効化」を押す（iOSの場合は青枠を別途やります）

「有効にする」を押す

ここからわからなくなったので、Android用GoogleMapドキュメントの「APIを作成する」を見て、Androidの設定の仕方を調べる

→以下の赤、緑、ピンクの順に押す

APIが作成されました（ここでAPIキーが表示され、コピーできます、他の画面でも確認できるので、消しても大丈夫です）

写真だと見ずらいかもしれませんが、作成されたAPIキーの右端の鉛筆マークを押す

ここでAPIのセキュリティの制限ができるので、設定をして下部にある「確認」を押しましょう

こちらのドキュメントに戻り、「Adding an API key for an Android app」に則り、AndroidアプリにAPIキーを記入しましょう

Google翻訳にかけました

ご指示のとおり、AndroidStudioの「作成したプロジェクト/android/app/src/main/androidManidest.xml」内にAPIキーを記載しましょう

ここでハマってしまったのが、本来「application」直下に置くべきところ（赤枠）、

「application」内の「activity」配下に記載してしまったため（黄枠）、「java.lang.RuntimeException: API key not found」になって動きませんでした。

記載する場所にご注意ください。

同ドキュメント内、「Putting a map on the screen」を「lib/main.dart」に丸コピしてプログラムを実行しましょう

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}

実行してすぐにGoogleMapが開きました！ぬるぬる動きます！

これで現在地の取得や、例えば周囲2キロ以内の星４のお店を表示するといった機能をやってみたいなと思います。

Flutter,プログラミング