FlutterのGoogleマップで階層を表示しよう！

2025年4月2日

FlutterのGoogleマップには、PolylineやMarkerなど便利な機能がたくさんあります。
普段Googleマップを使っていると、大型のショッピングモールや空港などでフロア階層の地図を見られることがありますよね。「これってどうやって実装するのかな？」と気になり、調べて試してみました。
この記事では、FlutterアプリでGoogleマップの階層表示を有効にする方法を紹介します！
※Androidでの実装方法です

Table of Contents

環境構築と設定

google_maps_flutterパッケージをpubspec.yamlに追加します。

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.10.1

その後以下のコマンドを入力

flutter pub get

Google Cloud Console の設定

1 左のダッシュボードから 「APIとサービス」 を選択
2 「ライブラリ」 を選択
3 「Maps SDK for Android」 を検索し、選択
4 「有効」 を押下

AndroidのAPIキー作成

  1. 左のダッシュボードから 「APIとサービス」 を選択
  2. 認証情報 を選択
  3. 認証情報を作成 → APIキー をクリック
  4. 発行された APIキーをコピー

AndroidMainfest.xmlに以下を追加

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

実装

Googleマップで階層を表示するには？

Googleマップで階層を表示するには、GoogleMap ウィジェットの indoorViewEnabled プロパティを true に設定する必要があります。

GoogleMap(
  indoorViewEnabled: true, // 屋内マップの階層表示を有効化
  ...
)

この設定を有効にすると、Googleマップの屋内対応エリア（例: ショッピングモール・空港など）で、フロアを切り替えるUIが自動的に表示されます。

FlutterでGoogleマップを使えば、屋内マップの階層表示も簡単にできます！
indoorViewEnabled: true を設定するだけで、ショッピングモールや空港などのフロアを切り替えられるUIが自動で表示されるのは便利ですよね。地図アプリを作るなら、この機能もうまく活用してみてください！