はじめに
FlutterアプリにGoogleMapを表示する方法をご紹介します。
今回は基礎編①ということでGoogleMapを表示するための最低限の実装でご説明したいと思います。
使うもの
- Google Maps Platform
Google社が公開しているGoogleMapのAPIを公開しているプラットフォームです。
こちらからAPIキーを取得します。 - google_maps_flutter
GoogleMapを表示するためのFlutterパッケージです。Google社の公式Flutterチームが開発しているため信頼性が高く、今後の機能追加も活発に行われていくのではないかと思います。
実装していく
Google Maps Platform側の準備
まずはiOS用APIとAndroid用APIの有効化と、APIキーの取得を行います。
下記のGoogleMapsPlatformにアクセスして、右上の「使ってみる」ボタンをクリック。
自身のGoogleアカウントでログインしましょう。
次に左のタブメニューから「API」を選択し、メイン画面から「Maps SDK for iOS」を選択します。

「有効にする」を押します。
これでiOS用APIの有効化が完了しました。
Android用のAPIキーについても同様に「Maps SDK for Android」から有効にしてください。

最後に左メニューの「認証情報」を選択し、「+認証情報を作成」→「APIキー」を選択します。
そうしますとAPIキーが作成され、画面中央あたりのリスト部分に表示されます。
以上でGoogle Maps Platform側の準備は完了です。

Flutter側の準備
パッケージ導入
今回利用するFlutterパッケージgoogle_maps_flutterを導入します。
pubspec.yamlファイルに以下記載を追加しましょう。
なお、本記事執筆時点の最新版である2.1.4を導入しておりますが、
ご利用される際は最新バージョンを公式サイトから確認してください。
dependencies:
google_maps_flutter: ^2.1.4
iOS側の設定
google_maps_flutterパッケージを利用するにはiOS側とAndroid側それぞれで設定が必要です。
まずはiOS側の設定をご説明します。
ios/Runner/AppDelegate.swiftに以下の2行を追加してください。
「APIキー」の部分は先ほど登録したAPIキーをコピペで入れてください。
import UIKit
import Flutter
import GoogleMaps //←追加
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("APIキー") //←追加
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
Android側の設定
1.SDKバージョンの設定
google_maps_flutterを使うには、最低でも20以上のSDKバージョンが必要です。
android/app/build.gradleのminSdkVersionを20に変更しましょう。
android {
defaultConfig {
minSdkVersion 20
}
}
2.APIキーの設定
APIキーを設定します。android/app/src/main/AndroidManifest.xmlの
<application>の階層に<meta-data…以降を丸ごとコピペしてください。
APIキーはiOSと同じもので構いません。
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="APIキーを入力"/>
以上で準備完了です!
GoogleMapを表示する
では、いよいよGoogleMapを表示してみましょう。
公式のサンプルは少々複雑な作りになっているため、今回は最低限GoogleMapを表示するところまでのコードとします。
コード
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
runApp(MaterialApp(home: MyMap()));
}
class MyMap extends StatefulWidget {
@override
State<MyMap> createState() => _MyMapState();
}
class _MyMapState extends State<MyMap> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GoogleMap(
initialCameraPosition: CameraPosition( //マップの初期位置を指定
zoom: 17, //ズーム
target: LatLng(35.0, 135.0), //経度,緯度
tilt: 45.0, //上下の角度
bearing: 90.0), //指定した角度だけ回転する
),
);
}
}
実行結果
GoogleMapを表示することができました!

解説
GoogleMapを表示するためにGoogleMap()ウィジェットを使用します。
最低限のパラメータとして初期位置initialCameraPositionを渡す必要がありますので、
経度、緯度やカメラ角度をCameraPosition()オブジェクトとして渡します。
LatLng()は位置情報のオブジェクトであり、第一引数に経度、第二引数に緯度を持ちます。
今回は経度35度、緯度135を指定してみました。
余談ですが、ちょうど35度とちょうど135度が交わる地点は山梨県であり、
「日本のへそ」と名付けられ観光地になっているそうです。
おわりに
今回はGoogle社公式のFlutterパッケージであるgoogle_maps_flutterを用いて、
FlutterアプリケーションにGoogleMapを表示する方法をご紹介しました。
次回の基礎編②ではもう少し詳しく使い方を解説していきますのでお楽しみに!