Flutter×GoogleMap　地図上にマーカーや線を表示する

はじめに
実装していく
おわりに

はじめに

今回はFlutterアプリケーションにGoogleMapを組み込むためのパッケージである、
google_maps_flutterの使い方をご紹介します。

こちらの基礎編②では主にマップの表示にするオブジェクト（マーカーや線）について説明します。
GoogleMapの表示方法を知りたい。という方はまずは基礎編①をご覧ください。

実装していく

基礎編①で説明したGoogleMap()ウィジェットのプロパティについて、
いくつかご紹介していきます。

今回使用するgoogle_maps_flutterのバージョンは下記です。

dependencies:
  google_maps_flutter: ^2.1.4

地図タイプを変更する

地図の表示タイプを切り替えるにはmapTypeプロパティを指定します。

標準マップ(MapType.normal)※デフォルト

GoogleMap(
        initialCameraPosition: CameraPosition(
          zoom: 10,
          target: LatLng(35.0, 135.0),
        ),
        mapType: MapType.normal,
)

地形マップ(MapType.terrain)

GoogleMap(
        initialCameraPosition: CameraPosition(
          zoom: 10,
          target: LatLng(35.0, 135.0),
        ),
        mapType: MapType.terrain,
)

サテライトマップ(MapType.satellite)

GoogleMap(
        initialCameraPosition: CameraPosition(
          zoom: 10,
          target: LatLng(35.0, 135.0),
      ),
      mapType: MapType.satellite,
)

ハイブリッドマップ(MapType.hybrid)

GoogleMap(
        initialCameraPosition: CameraPosition(
          zoom: 10,
          target: LatLng(35.0, 135.0),
      ),
      mapType: MapType.hybrid,
)

マーカーを表示する

GoogleMapで位置を示すために使われるマーカー(赤いピン)を表示してみます。

マーカーを表示する

GoogleMap(
  initialCameraPosition: CameraPosition(
    zoom: 15,
    target: LatLng(35.0, 135.0),
  ),
  markers: {
    Marker(markerId: (MarkerId('marker1')), position: LatLng(35.0, 135.0))
  },
)

markersプロパティ
Set<Marker>型をパラメータとして指定します。Marker()ウィジェット１つにつきマップにマーカーが1つ表示されます。Setなので{}内にMarker()を複数記載すれば、記載した分だけマーカーが表示されます。
Marker()ウィジェット
positionパラメータで指定した箇所にマーカーを表示します。
MarkerIDという一意なIDを指定する必要があります。

マーカーに吹き出しをつける

Marker(
    markerId: (MarkerId('marker1')),
    position: LatLng(35.0, 135.0),
    infoWindow: InfoWindow(title: '日本のヘソ', snippet: '35度と135度の交点は日本のヘソ'),
)

infoWindowプロパティ
InfoWindow()ウィジェットをパラメータとして渡します。
titleにはタイトルを、snippetには補足などの本文を指定します。
吹き出しはデフォルトでは非表示状態で、マーカーをタップすると表示されます。

アイコンをオリジナル画像にする

class _MyMapState extends State<MyMap> {
  late BitmapDescriptor myIcon = BitmapDescriptor.defaultMarker;

  @override
  void initState() {
    Future(() async {
      myIcon = await BitmapDescriptor.fromAssetImage(
        const ImageConfiguration(),
        'images/myIcon.png',
      );
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: CameraPosition(zoom: 15,target: LatLng(35.0, 135.0),),
        markers: {
          Marker(
            markerId: (MarkerId('marker1')),
            position: LatLng(35.0, 135.0),
            icon: myIcon,
          )
        },
      ),
    );
  }
}

iconプロパティ
アイコンのカスタマイズを行うプロパティです。後述のBitmapDescriptorウィジェットをパラメータとして渡します。
BitmapDescriptorウィジェット
オリジナルアイコンを表すオブジェクトです。fromAssetImageでアイコンに使用する画像を指定します。画像ファイルは事前にpubspec.yamlからassetに読み込んでおきましょう。
ImageConfiguration()のパラメータをいじることでアイコンサイズ等も変更ができます。

なお、5行目のinitState()内でアイコン画像を読み込んでいますが、
BitmapDescriptor.fromAssetImageはFuture型を返します。
今回はコード数削減のため、initState()内awaitしていますが、
通常は別メソッドに分けた方がわかりやすいかと思います。

直線を引く(polyline)

//GoogleMap()ウィジェットのプロパティとして指定する
polylines: {
  Polyline(
    polylineId: PolylineId('line1'),
    points: [
      LatLng(35.000, 135.000), //①
      LatLng(35.010, 135.005), //②
      LatLng(34.990, 135.005), //③
    ],
    color: Colors.pink,
    width: 5,
  )
}

※Marker()ウィジェットのコードは省略しています。

polylinesプロパティ
考え方はmarkersプロパティと同じです。
Polyline()ウィジェットが直線を表し、そのSetとしてpolylinesプロパティに指定します。
複数の直線を引きたければSetに複数Polyline()ウィジェットを入れてください。
Polyline()ウィジェット
こちらも考え方はMarker()ウィジェットと同じです。
一意なIDとしてPolylineIdを指定します。一番大事な直線部分ですが、pointsプロパティにLatLng(経度,緯度)の配列を渡すことでそれらの地点を順番に結んだ直線が描画されます。
線の色はcolor、太さはwidthで変更します。