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

クラウドベースの地図のスタイル設定を使用して、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',
    });

    document.body.append(map);
}

void init();

概要

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

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

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

地図 ID を動的に更新する

地図のインスタンス化後に、mapId プロパティを動的に更新できます。これにより、Map3DElement インスタンス全体を再作成することなく、別のクラウドベースのマップ スタイルを適用できます。

マップ ID を更新するには、Map3DElement インスタンスの mapId プロパティを設定します。

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

mapId プロパティは HTML 属性に反映されるため、属性を変更して動的に更新することもできます。

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

制限事項

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

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