Flutter で GoogleMap にマーカーを作成。Widget から PNG の時代は終わり。

Flutter で GoogleMap と言えば
google_maps_flutter ですよね

https://pub.dev/packages/google_maps_flutter

ただこのパッケージを使ってマーカーを表示しようとすると
Widget を PNG にして BitmapDescritor に再度して取り扱う必要があるんです。
やけに面倒ですよね。

しかも PNG にする必要があるから
アニメーションとか全く出来ない

これはぴえんだ...

ということで他に方法ないかなぁと
考えること8時間・・・

ついに閃きました。

flutter_map を使って解決

https://pub.dev/packages/flutter_map

色々と調べていくと
flutter_map の marker に関しては
widget をそのまま地図上に表示することができるから
アニメーションとかもオチャノコサイサイってことがわかりました。

ってことは、flutter_map に GoogleMap を表示してしまえば
解決じゃね？
ってことでその方針で進めていくと、うまくいけました。

コードはこちら

dart

final String urlTemplate =
        'https://tile.googleapis.com/v1/2dtiles/{z}/{x}/{y}?session=$sessionToken&key=$googleMapApiKey';

FlutterMap(
    children: [
        /// GoogleMap の表示
        TileLayer(urlTemplate: urlTemplate),
    ],
),

あ、イケナイイケナイ、忘れてた。
先に sessionToken を取得する必要があるから
apikey を使って sessionToken を取得してね。

dart

Future<String> fetchSessionToken()async{
    final uri = Uri.https(
        'tile.googleapis.com',
        '/v1/createSession',
        {
            'key': googleMapApiKey,
            'mapType': 'roadmap',
            'language': 'ja',
            'region': 'JP',
        },
    );

    final res = await http.post(uri);
    final body = jsonDecode(res.body);
    return body['session'];
}

※ エラーハンドリングは適当にやって下さい

コードは書けたけど動かん

コードは合ってるのに動かないのはな〜ぜな〜ぜとか思って調べてたら
権限を許可する必要があるってことに気がついた。
これに1時間要した、ぴえん。

Map Tiles API ってのを許可してもらえると完璧！

あとは MarkerLayer 使って好きに widget でマーカーを入れまくろう！
ってことでガンバ。