[Flutter]GoogleMapのマーカーを画像にする方法

Googleマップのマーカーを画像にする方法が分からなくて困ったので、解決方法を記しておきます。

先に簡単に結論を述べておくと、画像をBitmapDescriptorという形式に変換するとマップに表示出来ます。

では、記事に入っていきます、

GoogleMapのマーカーを画像にする方法

本解説では、Googleマップの導入方法などは割愛させていただきます。

というわけで、手順としては以下の通り。

では、詳しく解説していきます。

まず最初に、BitmapDescriptor変数を定義します。

BitmapDescriptor markerIcon;

次に、画像をUint8List形式に変換する関数を用意します。

この作業を行わず直接画像をBitmapDescriptor形式へ変換すると画像のサイズの調整が出来ないので不便です。

というわけで、次は先ほど作成した関数を利用して画像をUnit8List形式にしてから、BitmapDescriptorへと変換して、最初に作成したBitmapDescriptor変数へと代入を行います。(notifyLisnersは不要なら外して良いです。)

これで準備は完了です。

最後は、マーカーのiconプロパティに先ほど作成したBitmapDescriptor変数を入れるだけです。

先ほどまでの処理をまとめた関数を用意しておき、Googlemapを読み込む前にFutureBuilderなどで読み込むと良い感じで出来上がります。

というわけで、この記事は終わりとなります。

僕の場合、GoogleMapを作成するときにFutureBuilderを使ったら無限ビルドが起こったので、良ければこちらの記事（[Flutter]FutureBuilderの無限ビルドを防ぐ方法）も参考に。