地図のカラーパターン

roadmap 地図と terrain 地図では、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 は反映されません。