マーカー付きの地図の追加する

はじめに

マーカー付き地図の例

このチュートリアルでは、Google マップを Flutter アプリに追加する方法を紹介します。地図には、特定の場所を示すマーカー（ピンとも呼ばれます）が配置されています。

コードを入手する

Flutter のサンプル リポジトリのクローンを作成するかダウンロードします。サンプルコードは google_maps ディレクトリにあります。

開発用プロジェクトをセットアップする

このトピックを続行する前に、Flutter プロジェクトをセットアップするの手順を完了しておく必要があります。

1. Google Maps for Flutter パッケージをインポートする

  1. お好みの IDE で、main.dart ファイルを開きます。
  2. 以下のインポート文がファイルに追加済みであることを確認します。
import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Flutter アプリに Google マップを追加する

Scaffold ウィジェット内に body として GoogleMap ウィジェットを追加します。 

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

  • markerId オプションではマーカーのラベルを指定できます。
  • position オプションではマーカーを表示する地図上の位置を指定できます。

3. アプリをビルドして実行する

次のいずれかの方法で Flutter アプリを起動します。

  1. ご使用の IDE で Run ボタンをクリックします。
  2. コマンドラインで flutter run を実行します。

このページの画像のように、オーストラリア東海岸のシドニーにマーカーが立った地図が表示されます。

トラブルシューティング

  • 地図が表示されない場合、API キーを取得してアプリに追加してあることを確認します。
  • API キーに iOS バンドル ID による制限をかけている場合は、今回のアプリのバンドル ID（com.google.examples.map-with-marker）を追加して許可してください。
  • Wi-Fi または GPS の接続状態が良好であることを確認します。
  • Flutter DevTools でログを確認し、アプリをデバッグします。
  • Flutter アプリの実行について詳細を確認します。

4. コードを理解する

このコードは GitHub で入手できます。

  1. 必要なパッケージを入手してアプリを初期化します。 
       import 'package:flutter/material.dart';
   import 'package:google_maps_flutter/google_maps_flutter.dart';

   void main() => runApp(const MyApp());

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

   @override
      State<MyApp> createState() => _MyAppState();
   }
  2. オーストラリアのシドニーを中央とする地図を作成します。 
    class _MyAppState extends State<MyApp> {
   
   late GoogleMapController mapController;
   
   final LatLng _center = const LatLng(-33.86, 151.20);
   
   void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
   }
  3. アプリ内に Google マップの地図を表示するために必要な各ウィジェットを追加します。 
    @override
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: _center,
              zoom: 11.0,
            ), // CameraPosition
        ), // GoogleMap
      ), // Scaffold
    ); // MaterialApp
  }
}
  4. markers ウィジェットを追加して、ウィジェットをアプリに追加します。 
       body: GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
         target: _center,
         zoom: 11.0,
      ),
      markers: {
         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
            ), // Marker
      }, // markers
   ), // GoogleMap
   ...
  5. 情報ウィンドウをマーカーに追加します。 
          const Marker(
            markerId: const MarkerId("Sydney"),
            position: LatLng(-33.86, 151.20),
            infoWindow: InfoWindow(
               title: "Sydney",
               snippet: "Capital of New South Wales",
            ), // InfoWindow
      ), //Marker
      ...
    デフォルト状態では、ユーザーがマーカーをタップすると、情報ウィンドウにコンテンツが表示されます。このデフォルト動作で問題ない場合は、マーカーのクリック リスナーを追加する必要はありません。

以上で、特定の場所を示し情報ウィンドウで追加情報を提示するマーカーが配置された Google マップを表示する、Flutter アプリが作成されました。また、Google Maps for Flutter パッケージの使用方法も確認しました。