FlutterでGoogle Mapsを使用する方法

Flutterのプロジェクトを作成するまず、Flutterのプロジェクトを作成します。ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。

flutter create gmap_example

Google Maps APIキーを取得する Google Mapsを使用するには、Google Cloud PlatformでAPIキーを取得する必要があります。Google Cloud Platformにアクセスし、プロジェクトを作成し、Maps SDK for AndroidおよびMaps SDK for iOSを有効にしてAPIキーを生成します。
google_maps_flutterパッケージを追加する pubspec.yamlファイルを開き、dependenciesにgoogle_maps_flutterパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

パッケージを追加したら、ターミナルまたはコマンドプロンプトで以下のコマンドを実行してパッケージを取得します。

flutter pub get

Google Mapsを表示するウィジェットを作成する main.dartファイルを開き、以下のコードを追加します。

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Sample'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
        ),
      ),
    );
  }
}

このコードでは、google_maps_flutterパッケージからGoogleMapウィジェットを使用しています。ウィジェット内のinitialCameraPositionプロパティを設定することで、表示するマップの初期位置とズームレベルを指定できます。

APIキーを設定する GoogleMapウィジェットでは、APIキーを設定する必要があります。main.dartファイルに以下のコードを追加します。

import 'package:google_maps_flutter/google_maps_flutter.dart' as maps;
// ...
class MyApp extends StatelessWidget {
  final String apiKey = 'YOUR_API_KEY';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
      home: Scaffold(
        // ...
        body: maps.GoogleMap(
          mapType: maps.MapType.normal,
          initialCameraPosition: maps.CameraPosition(
            target: maps.LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
        ),
      ),
    );
  }
}

YOUR_API_KEYの部分には、先ほど取得したGoogle Maps APIキーを入力します。

これで、Flutterアプリ内でGoogle Mapsを表示する準備が整いました。実行して、マップが正常に表示されることを確認してください。

以上が、FlutterでGoogle Mapsを使用するための基本的な手順とコード例です。必要に応じて、マーカーやルートなどの詳細な設定を追加することもできます。詳細な使い方については、公式ドキュメントやサンプルコードを参考にしてください。