【Google Maps Platform】新たな color scheme でダークモードが設定できるようになりました！

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

本日は、Maps JavaScript API バージョン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で独自にスタイルを適用する方法も検討してみてください。 
Cloud Styling でもダークモードと同様のマップのスタイル設定は可能です。
Cloud Styling では、GUIを操作しながらマップのスタイルを試すことができます。
詳細についてはこちらの記事をご参照ください。
＜Cloud Styling によるダークモード＞
なお、Color Scheme による設定では、
Maps JavaScript API が提供するコントロール（ペグマンやズームなど）にも
ダークモードが適用されます。

<Cloud-based Styling>   <Color Scheme: DARK>

                             

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

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