地図のカラーパターン

roadmapterrain タイプの地図の場合、google.maps.colorScheme を使用して地図のカラーパターン(ダーク、ライト、または現在のシステム設定)を設定できます。colorScheme オプションは、地図の初期化時にのみ設定できます。地図の作成後にこのオプションを設定しても効果はありません。

ロードマップ

次の図は、roadmap タイプのライトモードとダークモードのカラーパターンを示しています。

ライトモードとダークモードのカラーパターンを使用した、パリの道路地図の例を 2 つ示します。

地形

次の図は、terrain タイプのライトモードとダークモードのカラーパターンを示しています。

ライトモードとダークモードのカラーパターンを使用した地形タイプの地図の例を 2 つ示します。

デフォルトでは、ライトモードが使用されます。地図を作成するときに ColorScheme をインポートし、地図オプションで地図の配色(LIGHTDARKFOLLOW_SYSTEM)を指定します。

const {ColorScheme} = await google.maps.importLibrary("core")

const mapOptions = {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
  colorScheme: ColorScheme.DARK,
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

地図のインスタンス化後にオプションをリセットしても、colorScheme は影響しません。