GoogleMap Tiles Api 使って styles を設定してスタイル要素を変える

Google Map でよく見るこの状態から

この状態にするまですげぇ時間かかった。

結論となるコード

dart

// API通信
final res = await http.post(
    Uri.parse(
        'https://tile.googleapis.com/v1/createSession?key=$googleMapApiKey',
    ),
    headers: {
        'Content-Type': 'application/json',
    },
    body: _jsonData(),
);

dart

String _jsonData() {
  final Map<String, dynamic> jsonData = {
    'mapType': 'roadmap',

    /// 言語
    'language': 'ja',
    'region': 'JP',

    /// ここのパラメータで高解像度になる
    'highDpi': 'true',
    'scale': 'scaleFactor2x',

    /// 新しいMapStyleの適用
    'apiOptions': ['MCYJ5E517XR2JC'],

    /// マップに表示する要素のスタイル
    'styles': [
            for (final element in _styleMap.entries)
              {
                'featureType': element.key,
                'elementType': element.value,
                'stylers': [
                  {'visibility': 'off'},
                ],
              },
          ],
 };

 return jsonEncode(jsonData);
}

dart

Map<String, dynamic> _styleMap = {
  'administrative': 'all',
  'landscape.natural.terrain': 'all',
  'poi.government': 'labels',
  'poi.medical': 'labels',
  'poi.park': 'labels',
  'poi.place_of_worship': 'labels',
  'poi.school': 'labels',
  'poi.sports_complex': 'labels',
  'road': 'labels',
  'transit': 'labels',
};

参考資料が少なすぎてっていうか
結局ドキュメント見て実装した。

どの参考資料も google が提供しているライブラリを使って実装しているから
セッショントークンを取得する際に色々とごちゃごちゃする必要があるみたいなことになってなくて
その辺が非常に苦労した部分。