---
title: 新たな color scheme でダークモードが設定できるようになりました！
description: 新たな color scheme でダークモードが設定できるようになりました！
---

[ブログ | 株式会社ゴーガ ](https://www.goga.co.jp/blog)

# [新たな color scheme でダークモードが設定できるようになりました！](https://www.goga.co.jp/blog/google-maps-platform-color-scheme.html)

 作成者: [goga](https://www.goga.co.jp/blog/author/goga)｜Sep 3, 2024 1:00:00 AM

皆様、こんにちは！  
Google Maps Platform のプロフェッショナル集団、ゴーガです。

本日は、Maps JavaScript API [バージョン3.58.1aのアップデート](https://developers.google.com/maps/documentation/javascript/releases#3.58.1a)から、Color Scheme の設定方法についてお伝えします。

### Color Scheme とは

Color Scheme を使用することで、マップに対して簡単にライトモード、ダークモードを設定することができます。

### Color Scheme の設定方法

Color Scheme の設定はマップの初期化のタイミングで行います。

```
const { ColorScheme } = await google.maps.importLibrary("core")const mapOptions = {  mapTypeControlOptions: {    center: { lat: 35.657, lng: 139.705 },    zoom: 12,    colorScheme: ColorScheme.DARK  }}const map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
```

この時、colorScheme には以下の3つの値を設定することができます。  
・LIGHT  
・DARK  
・FOLLOW_SYSTEM

FOLLOW_SYSTEM を指定した場合は、ユーザーが使用するデバイスの設定に応じてライトモードとダークモードが自動で切り替わります。

### Color Schemeを使用する際の注意点

“The colorScheme option can only be set when the map is initialized; setting this option after the map is created will have no effect.”  
Color Scheme はマップ初期化（読み込み）のタイミングでのみ、設定が可能です。そのため、同じマップインスタンスに対して後から Color Scheme を変更することができません。

もし、ユーザーに Color Scheme の変更機能を提供する場合、切り替えの度にマップの再読み込みを行う必要があります。これはマップの使用料に影響しますので、注意が必要です。

ご利用用途によって頻繁にマップのスタイルを切り替える必要がある場合は、以前から提供されている [Cloud Styling](https://developers.google.com/maps/documentation/javascript/cloud-customization)で独自にスタイルを適用する方法も検討してみてください。 Cloud Styling でもダークモードと同様のマップのスタイル設定は可能です。Cloud Styling では、GUIを操作しながらマップのスタイルを試すことができます。詳細については[こちらの記事](https://cloud.google.com/blog/ja/products/maps-platform/next-generation-of-cloud-based-maps-styling-now-generally-available-with-new-zoom-level-customization-and-usability-improvements)をご参照ください。

なお、Color Scheme による設定では、Maps JavaScript API が提供するコントロール（ペグマンやズームなど）にもダークモードが適用されます。

ゴーガには Google Maps Platform に精通したエンジニアが多く在籍しています。  
「そもそも Google Maps Platform って何？」や「Cloud Styling の設定方法は？」など、  
気になることがありましたらお気軽にご相談ください！

それでは、また次の記事でお会いしましょう！

[完全な記事を表示](https://www.goga.co.jp/blog/google-maps-platform-color-scheme.html)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "goga"
  },
  "dateModified" : "2025-08-14T07:10:43.096Z",
  "datePublished" : "2024-09-03T01:00:00Z",
  "headline" : "新たな color scheme でダークモードが設定できるようになりました！",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.goga.co.jp/blog/google-maps-platform-color-scheme.html",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "ブログ"
  }
}
```