【備忘録】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キロ以内の星4のお店を表示するといった機能をやってみたいなと思います。