Flutterで地図（google map）を表示してみる

Ubuntu18.04でAndroid Studio使っていて、Androidエミュレータを使っています。

下記を参考にやってみました。

qiita.com

google_maps_flutterというのを使っています。

pub.dev

作ったもの

github.com

最初にでたエラー

最初は下記のようなエラーが出て地図が表示されませんでした。

これは、エミュレータを変えたら消えました。 Galaxy Nexus API27というのを使っていましたが、Pixel XL API 28にしてみました。Targetに Google APIs があると良いとかどこかに書いてありました。

その他に出たエラー

initialCameraPositionがないよというエラー

initialCameraPositionは必須っぽかったです。

下記のようにinitialCameraPositionを入れたら消えました。

Widget build(BuildContext context) {
  return Scaffold(
    body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: LatLng(35.6580339, 139.7016358),
          zoom: 17.0,
        )),
  );
}

その他

その他色々出ましたが、忘れてしまいました。

大体、パーミッションがないよとかそういう系です。 APIのパーミッション設定が不足していました。

下記画像は有効にしたGoogleマップAPIの一覧ですが、最初 Maps SDK for Android を有効にしていなかたったのでエラーが出てました。

それ以外もエラーが出ましたが、エミュレータのアプリを立ち上げ直したらエラーが消えたりしました。

AndroidManifest.xmlにAPI KEYを設定する方法

AndroidManifest.xmlにAPIキーを設定する必要がありましたが、gitにあげるときは直接APIキー書かないで、下記のような感じにしました。

android/local.properties

local.propertiesにAPIキーを書いておきます。local.propertiesはデフォルトでgitignoreに設定されていました。

android.geoApikey=**********************

android/app/build.gradle

build.gradleでmanifestPlaceholdersを使って、APIキーを設定します。

def googleMapApikey = localProperties.getProperty('android.geoApikey')
if (googleMapApikey == null) {
    googleMapApikey = ''
}

android {
     defaultConfig {
        ...
        manifestPlaceholders = [androidGeoApikey: googleMapApikey]
    }
}

android/app/src/main/AndroidManifest.xml

下記のようにすると、local.propertiesの値を読み込めます。

<application
    ...
    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="${androidGeoApikey}" />
</application>