[Flutter] GoogleMapControllerの使い方

FlutterにGoogle Mapを導入できるgoogle_maps_flutterというパッケージで頻出するGoogleMapController Classの使い方について解説します。

google_maps_flutter | Flutter Package

GoogleMapController class - google_maps_flutter library - Dart API

GoogleMapControllerとは

GoogleMapControllerのドキュメントに以下説明があります。

Controller for a single GoogleMap instance running on the host platform.
ホストプラットフォーム上で動作する1つのGoogleMapインスタンス用のコントローラです。

https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/GoogleMapController-class.html

GoogleMapのコントローラであり、GoogleMapにマーカーを追加したり地図を移動させたりする際に使用するものであると考えています。
以下、サンプルコードです。

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

class MyMap extends StatefulWidget {
  const MyMap({Key? key}) : super(key: key);

  @override
  _MyMapScreenState createState() => _MyMapScreenState();
}

class _MyMapScreenState extends State<MyMap> {
  GoogleMapController? _googleMapController; 

  @override
  void dispose() {
    _googleMapController!.dispose();
    super.dispose();
  }

  void _moveCameraToLoc(double lat, double lng) {
    _googleMapController!.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(lat, lng),
          zoom: 15,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        GoogleMap(
          initialCameraPosition: const CameraPosition(
            target: LatLng(22.4214329, -111.0843345),
            zoom: 10,
          ),
          onMapCreated: (controller) {
            _googleMapController = controller;
          },
        ),
      ]),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Padding(
        padding: const EdgeInsets.only(bottom: 64.0),
        child: FloatingActionButton(
          onPressed: () {
            _moveCameraToLoc(35.658463773675805, 139.70156397672625);
          },
          child: const Icon(Icons.map),
          tooltip: "投稿",
        ),
      ),
    );
  }
}

GoogleMapControllerのインスタンス作成

 GoogleMapController? _googleMapController; 

GoogleMap()において、mapが作成される時にonMapCreatedで_googleMapControllerを格納

 onMapCreated: (controller) {
    _googleMapController = controller;
 },

_moveCameraToLocメソッドでは、上記のcontrollerを使っています。
_moveCameraToLocが呼び出されると、 _googleMapController!.animateCameraで、_moveCameraToLocの引数(double lat, double lng)に渡された緯度経度の場所に移動します。

  void _moveCameraToLoc(double lat, double lng) {
    _googleMapController!.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(lat, lng),
          zoom: 15,
        ),
      ),
    );
  }

今回、画面のfloatingActionButtonを押すと_moveCameraToLocが呼び出され、 _moveCameraToLoc(35.658463773675805, 139.70156397672625)に設定した場所に移動させます。

  floatingActionButton: Padding(
        padding: const EdgeInsets.only(bottom: 64.0),
        child: FloatingActionButton(
          onPressed: () {
            _moveCameraToLoc(35.658463773675805, 139.70156397672625);
          },
          child: const Icon(Icons.map),
          tooltip: "投稿",
        ),
      ),

画面初期表示時　太平洋のどこかに飛ばされる

下の赤いfloatingActionButtonを押すと、渋谷に移動

このように、 GoogleMapControllerはMapを移動させたりする際に使用します。