GoogleMap for Flutterを使う(Android)
使い方
パッケージをインストールする
pub.dev
[pubspec.yaml]
dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 google_maps_flutter: ^2.2.4 // ←これ
今回はAndroidアプリに実装したいので、以下のファイルにAPIキーを記述する
/android/app/src/main/AndroidManifest.xml
[AndroidManifest.xml]
<application android:label="myApp" android:name="${applicationName}" android:icon="@mipmap/ic_launcher"> <!-- ↓追加する --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="${MAPS_API_KEY}"/>
直打ちでもいいがGitHubなどに上げたい場合はlocal.propertiesに記述するようにしたほうが良い。
[local.properties]
MAP_API_KEY=xxxxxxxxxxx
アプリのbuild.gradleファイルにSDKの最小バージョンを記述しないとエラーになってしまう。
以下のように記述する。
android/app/build.gradle
[build.gradle]
~~~~~~~~~~~~~~~~~~~~~~省略 flutter { source '../..' } dependencies { implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" } // ↓を追加 android { defaultConfig { minSdkVersion 20 } }
実装は東京駅の場所を表示するように設定。
APIキーの設定が上手くいっていれば、GoogleMapメソッドをbodyに置くだけで東京駅がどんと表示される。
[map_page.dart]
import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; class MapPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('地図テスト'), ), body: GoogleMap( initialCameraPosition: CameraPosition( zoom: 17, // カメラのズームレベル target: LatLng(35.6811673, 139.7670516), // カメラが指している地理的な場所。 tilt: 45.0, // 地底からのカメラアングルの角度 bearing: 90.0 //北から時計回りに測定された、度単位のカメラの方位。 ), ) ); } }
結果
まとめ
Flutterで地図を実装するにあたりGoogleMap for Flutterを使うのはとても簡単だった。場所の設定にパラメータを渡してあげれば検索などもできる。iOSの方の設定もできればこの記事に更新したい。