FlutterでGoogle Mapsのマーカー(ピン)をタップして吹き出しを表示する
前回はGoogle MapsをFlutterに表示しました。
マーカーをタップして吹き出しを表示する
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(), // マーカーをセット ),
他にも色々とセットすることができて、例えばアイコンの色を変えたり、吹き出しタップ時にアクションを行えます。
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 は一つしか表示されないので注意してください。