FlutterでGoogle Mapsを 触ってみた potatotips #82 いどぬん / Natsuki Idota

自己紹介 ● 名前 いどぬん / Natsuki Idota ● 会社 株式会社Mobility Technologies / Flutter ● サービス Twitter: @idonuntius Github: idonuntius

本題 サンプルは下記URL https://github.com/idonuntius/GoogleMapsExample_Flutter

紹介 1. マップ 2. マーカー 3. ポリライン

紹介 4. ポリゴン 5. サークル

導入方法（1. APIの取得） 1. https://mapsplatform.google.com/ にアクセスし、「Get started」をクリック 2. 必要事項を入力 3. 「自分のAPIキー」をコピー

導入方法（2. Flutter側の設定） pubspec.yamlのdependenciesにgoogle_maps_flutterを追加

導入方法（3. iOS側の設定） AppDelegate.swiftを開き 1. 「import GoogleMaps」を追加 2. 「GMSServices.provideAPIKey(APIKey)」を追加 1 2

導入方法（4. Android側の設定） AndroidManifest.xmlを開き、「com.google.android.geo.API_KEY」を追加

使用方法（最速実装）

使用方法（GoogleMapクラスの主なオプション） オプション 説明 デフォルト値 initialCameraPosition マップのカメラの初期位置 onMapCreated マップが使用可能な状態になったとき（生成時）のコールバックメソッド mapType マップの種類 MapType.normal scrollGesturesEnabled スクロールジェスチャーに反応するかどうかを指定 true onCameraMove ドラッグやピンチのジェスチャ操作など状態変更時に発生。 地図（カメラ）の中心の緯度と 経度を取得 markers 地図上に配置するマーカー polylines 地図上に表示するポリライン polygons 地図上に表示するポリゴン circles 地図上に表示するサークル

使用方法（GoogleMapの主なオプション） オプション 説明 デフォルト値 initialCameraPosition マップのカメラの初期位置 onMapCreated マップが使用可能な状態になったとき（生成時）のコールバックメソッド mapType マップの種類 MapType.normal scrollGesturesEnabled スクロールジェスチャーに反応するかどうかを指定 true onCameraMove ドラッグやピンチのジェスチャ操作など状態変更時に発生。 地図（カメラ）の中心の緯度と 経度を取得 markers 地図上に配置するマーカー polylines 地図上に表示するポリライン polygons 地図上に表示するポリゴン circles 地図上に表示するサークル

マップの種類（MapType） 1. none 2. normal 3. satellite (衛生) 4. terrain (地形) 5. hibrid (衛星画像+ラベル/ オーバーレイ)

マーカーの表示

Markerクラスの主なオプション オプション 説明 デフォルト値 markerId マーカーID position マーカーの位置。LatLngで指定 LatLng(0.0, 0.0) icon マーカーのアイコン BitmapDescriptor.defaultMarker infoWindow タップ時に表示される情報ウィンドウ InfoWindow.noText anchor マーカーのpositionに配置されるiconの位置 (0.0, 0.0)の場合は画像の左上、 (1.0, 1.0)の場合は画像の右下 Offset(0.5, 1.0) rotation マーカーの回転 0.0 onTap マーカーのタップイベントを受け取るためのコールバック 他にもドラックイベントを受け取るためのコールバックなどがあります

Markerクラスの主なオプション オプション 説明 デフォルト値 markerId マーカーID position マーカーの位置。LatLngで指定 LatLng(0.0, 0.0) icon マーカーのアイコン BitmapDescriptor.defaultMarker infoWindow タップ時に表示される情報ウィンドウ InfoWindow.noText anchor マーカーのpositionに配置されるiconの位置 (0.0, 0.0)の場合は画像の左上、 (1.0, 1.0)の場合は画像の右下 Offset(0.5, 1.0) rotation マーカーの回転 0.0 onTap マーカーのタップイベントを受け取るためのコールバック 他にもドラックイベントを受け取るためのコールバックなどがあります

マーカーのアイコン 1. 色の変更 「hubBlue」以外にもさまざまな色が定義されています。 また「defaultMarkerWithHue」には0~360の値を指定 できるので自分の好きな色に変更ができます。

マーカーのアイコン 2. 画像に変更 1. pubspec.yamlにリソースを追加 2. 画像の設定

マーカーのアイコン 2. 画像に変更 1. pubspec.yamlにリソースを追加 2. 画像の設定 ローカルの画像を取得するための 「fromAssetImage」メソッドが Future型のた め「FutureBuilder」を使用する

マーカーのアイコン 2. 画像に変更 1. pubspec.yamlにリソースを追加 2. 画像の設定 取得した画像を設定

マーカーのアイコン 2. 画像に変更

マーカーの情報ウィンドウ その他にも「anchor」や「onTap」の オプションがあります。

ポリライン

ポリライン

ポリライン マップ生成時にカメラを移動させて、 ポリライン全体を表示させることも可能

Polylineクラスの主なオプション オプション 説明 デフォルト値 polylineId ポリラインID points ポリラインの座標。LatLngのListで指定 [] patterns ポリラインのストロークパターン [] color ポリラインの色 Colors.black width ポリラインの幅 10 onTap タップイベントを受け取るためのコールバック

Polylineクラスの主なオプション オプション 説明 デフォルト値 polylineId ポリラインID points ポリラインの座標。LatLngのListで指定 [] patterns ポリラインのストロークパターン [] color ポリラインの色 Colors.black width ポリラインの幅 10 onTap タップイベントを受け取るためのコールバック

ポリラインのパターン

ポリラインのパターン 但し、Androidでしか使えません。 iOSはissue化されており、まだ実装中みたいです。 https://github.com/flutter/flutter/issues/60083

応用 1. マーカー + Timer 2. マーカー + ポリライン

まとめ ● FlutterのGoogle Mapsではマーカーやポリラインなどを使って色々な表示ができそ う ● またそれらを組み合わせることで様々な用途に使えそう

ありがとうございました