[Flutter]google_maps_flutterでGoogleマップを表示

今回はFlutterアプリにGoogleマップを表示する方法についてご紹介します！

google_maps_flutterとは

google_maps_flutterはFlutterのプラグインの一つで、アプリ内にGoogle Mapsの地図を簡単に組み込むことができます。

google_maps_flutter | Flutter Package

セットアップ

Flutter アプリに Google マップを追加する  |  Google Codelabs

第一に、このプラグインを使うにはFlutterの環境構築やGoogle Maps Platformの設定などが必要となります。詳しい説明は公式サイトをチェック。

google_maps_flutterの導入

pubspec.yamlファイルにgoogle_maps_flutter: ^2.2.8を追加。
（2023年5月時点で2.2.8が最新版だったので、このバージョンを使用）

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.2.8

その後、ターミナルで以下コマンドを実行。

flutter pub get

コード例

google_maps_flutterの基本的なコードを以下に記載します。

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 Example'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(35.6895, 139.6917), // 東京
            zoom: 10,
          ),
        ),
      ),
    );
  }
}

まずはファイルにgoogle_maps_flutterをimportします。

import 'package:google_maps_flutter/google_maps_flutter.dart';

StatelessWidgetを継承したMyAppクラスで、ビジュアルレイアウト構造を提供するScaffoldウィジェットを使用しています。
Scaffoldのbody:には、google_maps_flutterプラグインのGoogleMapウィジェットを使用し、mapを表示しています。
GoogleMapウィジェットで使えるプロパティは様々ですが、ここではinitialCameraPositionプロパティを使用し、地図の初期表示位置とズームレベルを設定しています。この例では、アプリ起動時に東京（経度: 139.6917, 緯度: 35.6895）を中心にズームレベル10でmapを表示するようにしました。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Example'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(35.6895, 139.6917), // 東京
            zoom: 10,
          ),
        ),
      ),
    );
  }

他にも例えば、GoogleMapウィジェットでmarkersプロパティを使えばMapの任意の場所にマーカーを表示できます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Example'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(35.6895, 139.6917), // 東京
            zoom: 10,
          ),
　　　　　　 markers: {
            Marker(
              markerId: MarkerId('marker_1'),
              position: LatLng(35.6895, 139.6917), // 東京
              infoWindow: InfoWindow(
                title: '東京',
                snippet: 'これは東京です。',
              ),
            ),
            Marker(
              markerId: MarkerId('marker_2'),
              position: LatLng(35.6762, 139.6503), // 渋谷
              infoWindow: InfoWindow(
                title: '渋谷',
                snippet: 'これは渋谷です。',
              ),
            ),
          },
        ),
      ),
    );
  }

このコードでは、マーカーを東京に配置し、マーカーをクリックすると情報ウィンドウが表示されます。
MarkerウィジェットのmarkerIdプロパティには、一意のIDを指定します。
infoWindowプロパティには、マーカーの詳細情報を表示するためのInfoWindowウィジェットを指定します。これで地図上のマーカーをタップすると、title, snippetに記載された'渋谷'などの情報が画面に表示されるようになります。

まとめ

google_maps_flutterを使えば、地図情報を活用したアプリケーションを簡単に作ることが可能となります。
色々触ってみると、たくさんの機能があることに驚かされると思います！