先生と生徒の会話形式で理解しよう

生徒

「Flutterアプリに地図を表示したいんですけど、Google Mapsを使う方法ってありますか？」

先生

「はい、Flutterではgoogle_maps_flutterという公式パッケージを使えば、簡単にGoogleマップを表示できますよ。」

生徒

「APIキーとかも必要ですか？手順を一から知りたいです。」

先生

「もちろん、FlutterでGoogle Mapsを表示するためには、Google Cloud PlatformでAPIキーを取得し、それをFlutterプロジェクトに設定する必要があります。それでは、詳しくステップを追って説明していきましょう。」

1. FlutterでGoogle Mapsを使うための準備

FlutterでGoogle Mapsを表示するには、google_maps_flutterパッケージを使います。まずはpubspec.yamlに依存関係を追加しましょう。


dependencies:
  google_maps_flutter: ^2.5.0

Flutter公式のGoogle Mapsプラグインは、iOS・Androidの両方に対応しており、ピン（マーカー）を立てたり、地図を移動させたりする機能が提供されています。

2. Google CloudでAPIキーを取得しよう

FlutterでGoogle Mapsを使うには、Google Cloud ConsoleでAPIキーを取得し、「Maps SDK for Android」と「Maps SDK for iOS」を有効化する必要があります。

Google Cloud Consoleにアクセス
新しいプロジェクトを作成
「APIとサービス」から「ライブラリ」を選択
「Maps SDK for Android」「Maps SDK for iOS」を有効化
「認証情報」からAPIキーを作成し、コピー

このAPIキーをFlutterアプリに設定することで、Google Mapsが正しく表示されるようになります。

3. AndroidとiOSでの設定方法

FlutterでGoogle Mapsを表示するには、AndroidとiOSのネイティブ設定も必要です。

Androidの設定

android/app/src/main/AndroidManifest.xmlに以下を追加します。


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

iOSの設定

ios/Runner/AppDelegate.swiftに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("YOUR_API_KEY")
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

また、Info.plistにもパーミッション設定を追加してください。


<key>io.flutter.embedded_views_preview</key>
<true/>

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. FlutterコードでGoogle Mapsを表示する

いよいよFlutterアプリ上でGoogle Mapsを表示するコードです。以下は基本的な地図の表示例です。


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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(35.681236, 139.767125); // 東京駅の緯度経度

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

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

このコードでは東京駅を中心に地図が表示されるように設定しています。

5. よくあるトラブルと対処法

FlutterでGoogle Mapsを表示する際、表示されない・真っ白になるといったトラブルがよくあります。以下のチェックポイントを確認しましょう。

APIキーを正しく設定しているか
Maps SDKが有効になっているか
AndroidManifestやAppDelegateにキーが正しく書かれているか
エミュレータではなく、実機でテストしているか（エミュレータでは動作が不安定なことがあります）

それでも表示されない場合は、Flutterのキャッシュをクリアして再ビルドすることも有効です。


flutter clean
flutter pub get
flutter run

6. Google Mapsの応用：マーカー・現在地の表示

基本の地図表示ができたら、次はピン（マーカー）の追加や現在地の表示も取り入れてみましょう。マーカーの追加は以下のように行います。


Set<Marker> _markers = {
  Marker(
    markerId: MarkerId('tokyo'),
    position: LatLng(35.681236, 139.767125),
    infoWindow: InfoWindow(title: '東京駅'),
  ),
};

地図ウィジェットにmarkers: _markersを追加することで、マップ上にピンを立てることができます。

FlutterでGoogle Mapsを表示する方法！API連携ステップを初心者向けに解説