Logicky Blog

Logickyの開発ブログです

Flutterで地図(google map)を表示してみる

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

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

qiita.com

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

pub.dev

作ったもの

github.com

f:id:edo1z:20190826195600g:plain

最初にでたエラー

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

f:id:edo1z:20190825143212p:plain

f:id:edo1z:20190825143225p:plain

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

f:id:edo1z:20190826191409p:plain

その他に出たエラー

initialCameraPositionがないよというエラー

f:id:edo1z:20190826192107p:plain

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 を有効にしていなかたったのでエラーが出てました。

f:id:edo1z:20190826192927p:plain

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

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>