Flutter × Google Maps Platform

「最短でGoogle Mapを表示する方法」完全ガイド（iOS / Android 対応）

Flutter アプリで Google Maps Platform を使うための、
最もシンプル & 確実に動く手順をまとめました。

この記事では、
「地図を表示するところまで」
をゴールにします。

---

1. Google Cloud Console の準備

まず Google Maps Platform を使うための設定を行います。

手順

1. Google Cloud Console を開く
   https://console.cloud.google.com/

2. プロジェクトを作成 or 選択する

3. 左メニュー
   「API とサービス → ライブラリ」 を開く

4. 次の API を検索して「有効にする」をクリック

   • Maps SDK for Android
   • Maps SDK for iOS

5. 左メニュー
   「API とサービス → 認証情報」 を開く

6. 「認証情報を作成 → API キー」で
   API キーを発行する

---

2. Flutter アプリの作成

ターミナルで任意のフォルダへ移動して：

flutter create my_map_app
cd my_map_app

---

3. プラグインを追加（google_maps_flutter）

Flutter プロジェクトに Google Maps のパッケージを追加します。

flutter pub add google_maps_flutter

---

4. Android 設定

① Manifest に API キーを追加

android/app/src/main/AndroidManifest.xml を開き
<application> タグの中に次を追加します：

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

② minSdkVersion の確認

android/app/build.gradle の defaultConfig を確認：

minSdkVersion 21

21 以下の場合は 21 に修正します。

---

5. iOS 設定

iOS は Maps SDK の初期化が必要です。

① Podfile を編集

ios/Podfile を開き、以下があるか確認：

pod 'GoogleMaps'

なければ追加。

次に：

cd ios
pod install
cd ..

② AppDelegate.swift に API キーを設定

ios/Runner/AppDelegate.swift を開く：

import UIKit
import Flutter
import GoogleMaps

@main
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

    GMSServices.provideAPIKey("YOUR_API_KEY_HERE")

    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

---

6. シンプルな Google Map を表示するコード

lib/main.dart を次のように書き換えます：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Map Sample',
      home: const MapScreen(),
    );
  }
}

class MapScreen extends StatelessWidget {
  const MapScreen({super.key});

  static const tokyoStation = LatLng(35.681236, 139.767125);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Map サンプル'),
      ),
      body: const GoogleMap(
        initialCameraPosition: CameraPosition(
          target: tokyoStation,
          zoom: 14,
        ),
      ),
    );
  }
}

---

7. 動作確認（Android）

flutter run -d android

Android のエミュレータまたは実機で地図が表示されれば成功。

---

8. 動作確認（iOS）

iOS シミュレータまたは実機で実行：

flutter run -d ios

---

9. よくあるチェックポイント

地図が表示されない場合に確認するポイントをまとめます。

• Maps SDK for iOS / Android が 有効化されているか
• Google Cloud プロジェクトに 課金（Billing）が紐づいているか
• API キーの アプリケーション制限が厳しすぎないか
• iOS は GMSServices.provideAPIKey(...) が正しく呼ばれているか
• Android は Manifest でキーを設定しているか

---

まとめ

• Google Maps を Flutter に導入する流れは
  (1) Google Cloud 設定 → (2) Flutter パッケージ追加 → (3) Android/iOS 設定 → (4) Map ウィジェットを配置
  の4ステップ
• 最短で地図を表示するためのコードも提供
• iOS と Android どちらでも同じコードで動く