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

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

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

Cloud ベースのマップのスタイル設定では、Google Cloud コンソールでコードなしの編集が可能です。マップ コンソールでスタイルを編集すると、その変更がアプリケーションに自動的に反映されます。

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

async function initMap() {
    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',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

概要

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

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

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

制限事項

Maps JavaScript の 3D マップでクラウドベースのマップのスタイル設定を使用する際には、以下の制限事項に注意してください。

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