Google Maps もダークモード対応しようね

スタイルを適用する

isDarkMode のようなパラメータがあるわけではなく、自分で用意したスタイルを適用する形になります。
背景は黒、路線は青、文字は白などを個々に指定する必要があります。

指定方法としては JSON ファイルで指定する方法 と String で直接指定する方法 がありますが本記事では前者について紹介します。
実装方法は大きく変わりませんが、可読性や Android との共通化の観点から JSON 形式で指定することをお勧めします。

JSON で指定する

style.json などの JSON ファイルをローカルに用意し、Map の mapStyle に適用します。

// Map のインスタンス
let mapView = GMSMapView()

// ローカルファイルの URL を取得
if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
    // スタイルを適用
    mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
}

パラメータ

下記 3 つの要素を 1 セットとして、スタイル指定を配列で羅列していく形になります。

• featureType - 地理的な要素 (国境、施設、道 etc.)
• elementType - 地図上の要素 (線、文字)
• stylers - スタイル (色、明度、表示 / 非表示 etc.)

例えば 一般道の名前を白くする という指定は以下のようになります。

style.json

[
  {
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [
      {
        "color": "#FFFFFF"
      }
    ]
  }
]

各パラメータの詳細はこちらから。
https://developers.google.com/maps/documentation/ios-sdk/style-reference

テンプレートあります

パラメータを 1 から全て指定する事は根気がいる作業です。
実際の現場でデザイナーさんに細かく指定してもらう事や確認してもらう事は困難でしょう。

というわけで、スタイルを生成するサイトが公式であります。
https://mapstyle.withgoogle.com

Dark, Night, Aubergine からデザイナーさんと相談して選ぶ or カスタマイズすれば、簡単にダークモード対応が完了します。

備考

Android エンジニアさんは こちら をどうぞ。
iOS と同様に対応できるので、本記事をご参考いただければ幸いです。