概要

Maps JavaScript API 向けの WebGL ベースの機能を使用すると、傾斜と回転を制御したり、3D オブジェクトを地図に直接追加したりすることができます。利用可能な機能には、以下が含まれます。

• WebGL オーバーレイ表示を使用すると、カスタムの 2D / 3D グラフィックとアニメーション コンテンツを地図に追加できます。
• マウスとキーボードのジェスチャーを使用して、傾斜と方角をプログラムによって調整できるようになりました。
• map.moveCamera() を使用すると、複数のカメラ プロパティを同時に変更できます。
• ズームが小数値に対応しました。

スタートガイド

新しい WebGL 機能を使用するには、ベクターマップを使用するマップ ID が必要です。API ブートストラップ リクエストも更新する必要があります。このセクションでは、その方法について説明します。

新しいマップ ID を作成する

新しいマップ ID を作成するには、Cloud ベースのマップのスタイル設定を使用 - マップ ID を取得するに記載されている手順に従ってください。 地図のタイプを [JavaScript] に設定し、[ベクター] オプションを選択します。[傾斜] や [回転] のチェックボックスをオンにすると、地図の傾斜と回転が有効になります。これにより、こうした値をプログラムで調整できるほか、ユーザーが地図上で直接傾斜や方角を調整できるようになります。傾斜や方角を使用するとアプリに悪影響が及ぶ場合は、[傾斜] と [回転] をオフのままにして、ユーザーが傾斜や方角を調整できないようにします。

地図の初期化コードを更新する

地図の初期化コードを更新するには、作成したマップ ID が必要です。作成したマップ ID は [マップの管理] ページで確認できます。次のように、mapId プロパティを使用して地図をインスタンス化する際に、マップ ID を指定します。

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

例

次の機能については、使用例を確認できます。

• WebGL オーバーレイ表示
• WebGL の傾斜と回転
• WebGL の機能紹介
• WebGL 旅行アプリのデモ