umetaberu

umetaberu

プログラミング技術に関するメモ書き

GoogleMap for Flutterを使う(Android)

GoogleMap for Flutterとは?

Flutterで地図を実装する際の手段の一つで、Googleさんが提供しているFlutterの地図プラグイン

使い方

パッケージをインストールする
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の方の設定もできればこの記事に更新したい。