ふらっとFlutter

Flutterでのアプリ開発についてメモしていきます

FlutterでGoogle Mapsのマーカー(ピン)をタップして吹き出しを表示する

f:id:himaratsu:20210301235040p:plain

前回はGoogle MapsをFlutterに表示しました。

flutterdev.hatenablog.com     

マーカーをタップして吹き出しを表示する

  Google Mapsを扱うパッケージ google_maps_flutter では、マーカーは Marker クラスを使って表現します。

マーカーをタップして吹き出しを表示するには、以下のようなマーカーを定義します。

Marker tokyoTower = Marker(
  markerId: MarkerId('tokyo_tower'),
  position: LatLng(
    35.658581,
    139.745433,
  ),
);

これをGoogleMapsのWidgetに渡すとマーカーが表示されます。

GoogleMap(
        initialCameraPosition: _initialLocation,
        mapType: MapType.normal,
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        markers: [tokyoTower].toSet(),   // マーカーをセット
      ),

f:id:himaratsu:20210301235040p:plain
マーカーをタップして吹き出し(InfoWindow)を表示

他にも色々とセットすることができて、例えばアイコンの色を変えたり、吹き出しタップ時にアクションを行えます。

return new Marker(
  markerId: MarkerId(dam.id),
  position: LatLng(
    35.658581,
    139.745433,
  ),
  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
  onTap: () => { print("マーカーがタップされた") },
  infoWindow: InfoWindow(
    title: "ここは東京タワーです",
    onTap: () => { print("InfoWindowがタップされた") },
  ),
);

別のアクションから吹き出しを表示する

例えば別のUIをタップした時など、マーカータップ以外のアクションから吹き出しを表示したい時があると思います。

その場合は showMarkerInfoWindow を使って、以下のようなコードで実現できます。

final Completer<GoogleMapController> _controller = Completer();

// ...

var googleMap = await _controller.future;

final MarkerId marker = MarkerId("tokyo_tower");
await googleMap.showMarkerInfoWindow(marker);

吹き出しを開きたい MarkerId を指定しましょう。

同じように、「吹き出しを隠す」「吹き出しが表示されているかをチェックする」こともできます。

吹き出しを隠す

googleMap.hideMarkerInfoWindow(marker);

吹き出しが表示中かをチェックする

googleMap.isMarkerInfoWindowShown(marker)    // -> Bool

まとめ

今回はGoogle Mapsのマーカー周りの処理について紹介しました。 マーカーは Google Maps Widget に Set として渡され、重複する MarkerId は一つしか表示されないので注意してください。