3D 地図をカスタマイズする

Cloud ベースのマップのスタイル設定を使用して、3D 基本地図のデザインをカスタマイズできます。

Cloud ベースのマップのスタイル設定を使用すると、ユーザーに表示する地図のデザインを制御できます。スポットの密度、特定のスポット カテゴリの削除、フィーチャーの塗りつぶしやストロークの変更などの機能を制御することで、ユーザーに合わせた地図を作成できます。

Cloud ベースのマップのスタイル設定では、Google Cloud コンソールでコードなしで編集できます。作成したカスタム スタイルはそれぞれマップ ID に関連付けられます。マップ コンソールでスタイルを編集すると、変更内容はアプリケーションに自動的に反映されます。

次の例は、カスタム スタイルを使用してレクリエーション フィーチャーのアイコンとテキストの色をオレンジ色に変更した地図を示しています。

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

概要

Cloud ベースのマップのスタイル設定を使用して 3D マップをカスタマイズするプロセスは、2D マップの場合と同じです。

1 マップ ID を作成する マップ ID を作成します。 マップ ID は、スタイル設定を処理するためにアプリケーションに渡されます。以降の手順で、カスタム スタイルをこのマップ ID に関連付けます。
2 Cloud ベースのマップのスタイルを作成する このステップでは、[3D ハイブリッド] を選択し、[ライトモード] を使用する必要があります。
3 地図のスタイルを地図に関連付ける スタイルをリンク ステップ 1 で作成したマップ ID に
4 マップ ID をアプリケーションに追加する map-id パラメータを使用して、コードでマップ ID を指定します。
5 マップ ID を公開する カスタム スタイルへの変更は、公開後にアプリケーションに自動的に反映されます。

地図のスタイルの作成について詳しくは、地図のスタイルを作成して使用する をご覧ください。

制限事項

Maps JavaScript で 3D マップに Cloud ベースのマップのスタイル設定を使用する場合は、次の制限事項に注意してください。

  • ダークモードはサポートされていません。
  • マップ ID 対応の機能（データドリブン スタイル設定など）はサポートされていません。